实例的属性和方法

在看这个之前,先去看: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.$eldom对象。

vm.$options:包含实例选项的对象,包含了实例自定义属性

vm.$parent:访问父实例,替代将数据以 prop 的方式传入子组件的方式。参考处理边界之访问父组件实例

vm.$root:当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。实质是将根实例作为一个全局 store 来访问或使用,推荐使用 Vuex 来管理应用的状态。参考处理边界之访问根实例

vm.$children:当前实例的直接子组件。注意 $children 并不保证顺序,也不是响应式的。当使用 $children 来进行数据绑定,推荐使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

vm.$slotsvm.$scopedSlots:参考博文slot

vm.$refs:对象,为注册了rel特性的dom或者组件的引用集合。

refv-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()完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroydestroyed 的钩子。

使用建议:在大多数场景中你不应该调用这个方法。最好使用 v-ifv-for 指令以数据驱动的方式控制子组件的生命周期。

数组只在 2.2.0+ 中支持

猜你喜欢

转载自www.cnblogs.com/yaoyao-sun/p/10506144.html