Vue2.0『数据传递』

吐槽君 分类:javascript

总结:

1.子组件$emit抛出 父组件响应

   给子组件绑定自定义事件:
   <father @fn=fn :data=数据> </father>
   fn(data) {
       this.data = data
   }
   子组件内部触发自定义事件:
   poper:{
       value:number
   }
   this.emit('fn', 数据)
 

2.父组件v-model响应 子组件抛出input事件 接收value参数 可以通过model参数配置响应事件与接收参数

   1. <father v-model = value > </father>
   poper:{
       value:number
   }
   子组件内部触发自定义事件:this.emit('input', 数据)
 

3.父组件xx.sync="xx"也是双向绑定 子组件$emit('update:xx')抛出

   1. <father :updata:value = value => this.data = value :data=数据> </father>
   poper:{
       data:number
   }
   子组件内部触发自定义事件:this.emit('updata:value', 数据)
   2. <father :value.sync = 数据 :data=数据 > </father> 同步设置data
   poper:{
       data:number
   }
   子组件内部触发自定义事件:this.emit('updata:value', 数据)
 

4.可以通过扩展函数在原型上绑定广播/派发这个是在1.0中有的,但是2.0去除了,原理就是通过childrenchildren parent循环emit事件

   $parent:父组件内容
   $children[0]:第一个子组件内容
   this.$parent.$emit('自定义事件', 数据)
   this.$children.$emit('自定义事件', 数据)
 

5.重新创建一个实例实现eventBus事件总线 原理为在新的实例上通过onon emit传递与响应

    实例化组件:vue.prototypr.$enentBus = new Vue()
    实例化组件绑定事件:this.$eventBus.$on('绑定的事件', ()=> {})
    触发实例化组件事件:this.$eventBus.$emit('绑定的事件', 数据)
    注意:
        1.事件触发不能早于事件绑定
        2.可以用$nextTick解决
        this.$nextTick(() => {
            this.$eventBus.$emit('绑定的事件', 数据)
        })
 

6.传递参数时可以用v-bind/attrs传递传递函数可以用v−on/attrs传递 传递函数可以用v-on/listeners

    $attrs:组件的数据
    $listeners:组件的方法
    <father v-bind = $attrs v-on=$listeners> </father>
 

7.通过provide inject传递函数与参数

    父组件注入
    provide() {
     return {
         grandpa:this
     }
    }
    子组件消费
    inject:[
        'geandpa'
    ]
 

8.通过ref来获取组件实例,ref不能再template上使用,compute也不能用

     ref dom元素 dom对象
     ref 组件 组件实例
 

不建议用parent/parent/children 以及组件派发/广播,dispatch1.0是有得,2.0就没有了,因为这样结构不清晰

回复

我来回复
  • 暂无回复内容