實例的屬性和方法

在看這個以前，先去看：vue構造函數參數：選項

在單文件組件中，定義一個全局的vm變量，在created鉤子函數中，將this賦值給vm，就能夠在改文件中直接使用vm代理實例對象，訪問實例的屬性和調用方法。

屬性

vm.$data：Object，對應選項「data」

vm.$props：Object，對應選項「props」

 props:{
      data1:{
        type:String
     },
     data2:{
        type:Number
    }
  }
//{data1:"11",data2:22}

vm.$el：根dom對象。

vm.$options：包含實例選項的對象，包含了實例自定義屬性

vm.$parent：訪問父實例，替代將數據以 prop 的方式傳入子組件的方式。參考處理邊界之訪問父組件實例

vm.$root：當前組件樹的根 Vue 實例。若是當前實例沒有父實例，此實例將會是其本身。實質是將根實例做爲一個全局 store 來訪問或使用，推薦使用 Vuex 來管理應用的狀態。參考處理邊界之訪問根實例。

vm.$children：當前實例的直接子組件。注意 $children 並不保證順序，也不是響應式的。當使用 $children 來進行數據綁定，推薦使用一個數組配合 v-for 來生成子組件，而且使用 Array 做爲真正的來源。

vm.$slots和vm.$scopedSlots：參考博文slot。

vm.$refs：對象，爲註冊了rel特性的dom或者組件的引用集合。

當 ref 和 v-for 一塊兒使用的時候，引用將會是一個包含了對應數據源的這些子組件的數組。

$refs只會在組件渲染完成以後生效，而且它們不是響應式的，應該避免在模板或計算屬性中訪問 $refs。

參考處理邊界之訪問子組件實例或子元素

vm.$attrs：對象，包含該組件非prop特性集合（class 和 style 除外），經過在組件內部的子組件上使用v-bind="$attrs" 傳入子組件，在跨級組件中經常使用。

vm.$listeners：對象，包含了做用在這個組件上的全部監聽器（不含 .native 修飾器的）。配合 v-on="$listeners" 將全部的事件監聽器指向這個組件的某個特定的子元素，在跨級組件中經常使用。（參考「將原生事件綁定到組件‘）

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

舉個栗子：

父組件 A 下面有子組件 B，組件 B 下面有組件 C。B拿到A的數據，在C組件上經過$attrs和$listeners拿到B的數據，將組件 A 的遞數據給組件C。

//C組件
Vue.component('C',
{
        
    template:`<div>
     <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)">       
</div> `,

     methods:{
            passCData(val){                 
                this.$emit('getCData',val) //觸發父組件A中的事件   
            }
        }
})

//B組件
Vue.component('B',
{
        data(){
            return{
                mymessage:this.message
            }
        },
        
        template:`<div>
                <input type="text" v-model="mymessage" @input="passData(mymessage)"> 
                <!-- C組件中能直接觸發getCData的緣由在於 B組件調用C組件時 使用 v-on 綁定了$listeners 屬性 -->
                <!-- 經過v-bind 綁定$attrs屬性，C組件能夠直接獲取到A組件中傳遞下來的props（除了B組件中props聲明的） -->
                <C v-bind="$attrs" v-on="$listeners"></C> //這裏的是A的數據
            </div>`,

        props:['message'],//獲得父組件傳遞過來的數據
        methods:{
            passData(val){ 
                this.$emit('getChildData',val) //觸發父組件中的事件     
            }
        }
})     

//A組件
 
Vue.component('A',
{     
template:`<div>
                 <p>this is parent compoent!</p>
　　　　　　　　　　//在b組件裏，messagec特性包含在了$attrs裏，message特性由於是prop，因此沒在$attrs裏
                 //在b組件裏，getCData，getChildData事件包含在了$listeners裏 
                <B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B> 

            </div>`,

data(){
          return{
                message:'hello',
                messagec:'hello c' //傳遞給c組件的數據
            }
 },
methods:{
            getChildData(val){
                console.log('這是來自B組件的數據')
            },
            getCData(val){//執行C子組件觸發的事件
                console.log("這是來自C組件的數據："+val)
            }
        }
    })
    
var app=new Vue({
        el:'#app',
        template:`
            <div>
                <A></A>
           </div>`
    })                

vm.$isServer：當前 Vue 實例是否運行於服務器。

方法  

vm.$watch( expOrFn, callback, [options] )：

參數一：被觀察的表達式或計算屬性。表達式只接受監督的鍵路徑（不觀察對象，而是對象的屬性）

參數二：被觀察的值變化時，觸發的回調函數

參數三：對象，key有deep和immediate，使用以下：

//爲發現對象內部值的變化，指定 deep: true 
vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123

//實例化階段，當即以表達式的當前值觸發回調
vm.$watch('a', callback, {
  immediate: true
})
// 當即以 `a` 的當前值觸發回調

注意：在變異 (不是替換) 對象或數組時，舊值將與新值相同，由於它們是引用，指向同一個對象/數組。

返回一個取消觀察函數，用來中止觸發回調：

var unwatch = vm.$watch('a', cb)
unwatch()// 取消觀察

vm.$set( target, key, value )：設置的數據將成爲響應式的

vm.$delete( target, key )：通Vue.delete。應該不多會使用到它，目標對象不能是一個 Vue 實例或 Vue 實例的根數據對象。

vm.$on( event, callback )：監聽當前實例上的自定義事件。事件能夠由vm.$emit觸發。回調函數會接收全部傳入事件觸發函數的額外參數。

• {string | Array<string>} event (數組只在 2.2.0+ 中支持)

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

vm.$once( event, callback )：監聽一個自定義事件，可是隻觸發一次，在第一次觸發以後移除監聽器。

vm.$off( [event, callback] )：

{string | Array<string>} event (只在 2.2.2+ 支持數組)

移除自定義事件監聽器。

• 若是沒有提供參數，則移除全部的事件監聽器；

• 若是隻提供了事件，則移除該事件全部的監聽器；

• 若是同時提供了事件與回調，則只移除這個回調的監聽器。

vm.$emit( eventName, […args] )：觸發當前實例上的事件。附加參數都會傳給監聽器回調。

vm.$mount( [elementOrSelector] )：手動掛載一個未掛載的實例。若是沒有提供 elementOrSelector 參數，模板將被渲染爲文檔以外的的元素，而且你必須使用原生的append之類的API把它vm.$el插入文檔中。這個方法返回實例自身，於是能夠鏈式調用其它實例方法。

vm.$forceUpdate()：迫使 Vue 實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。

vm.$nextTick( [callback] )：沒搞懂它的使用場景？將回調延遲到下次 DOM 更新循環以後執行。

vm.$destroy()：徹底銷燬一個實例。清理它與其它實例的鏈接，解綁它的所有指令及事件監聽器。觸發 beforeDestroy 和 destroyed 的鉤子。

使用建議：在大多數場景中你不該該調用這個方法。最好使用 v-if 和 v-for 指令以數據驅動的方式控制子組件的生命週期。

數組只在 2.2.0+ 中支持