实例的属性和方法

在看这个以前，先去看：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+ 中支持