vue單文件組件data選項的函數體獲取vue實例對象


因配置的關系,導致 vue的data選項中存在事件。而事件無法獲取 vue 的實例對象;項目是單文件形式的,以下代碼只是例子

new Vue({
   el:...,
   data:{
     a: {
        onevent:function(){
          //由於a是某個插件的根對象,所以這里無法獲取 vue 的實例對象
        }
     }
   } 
})

 

方法一:

參考export用法文檔:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

export default (()=>{
    let defaultVue = {
       data: {
          a:{
             b: function(){
                // 這里可以使用defaultVue這個對象,不過,這里使用的就是js的對象,只能通過 defaultVue.data.propertyName 來獲取值
             }
          }
       }
    };
    return defaultVue;
})()

  

方法二(推薦):

vue Data選項的文檔可以看一下:https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95

主要知道 想要vue的響應式驅動的方式的話,就在 data選項里聲明一個 屬性即可,再然后就需要了解一下 vue的聲明周期了

第一步:

 

 

 

 

這里的 bind 方法,可以去 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 這里看看,bind方法的意思就是綁定指定的上下文(注意,是bind返回的函數才綁定到你指定的上下文了,不會修改原函數的)

 

 然后就 ok 了,這樣就不需要聲明全局的變量保存 vue實例了,不容易啊,琢磨近一天了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM