• 实例的属性和方法


    在看这个之前,先去看: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+ 中支持

  • 相关阅读:
    【回溯】数字排列问题
    Price List
    NanoApe Loves Sequence-待解决
    【回溯】n皇后问题
    安卓 学习之旅 入门
    mysql链接 显示 error: 'Access denied for user 'root'@'localhost' (using password: NO)'
    javaweb 实战_1
    java 插件安装
    leetcode 最长有效括号
    hdu 1074 Doing Homework
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10506144.html
Copyright © 2020-2023  润新知