vue中组件间的数据通信

636 阅读2分钟

一、属性传递

1、数据的传递

     在父组件(parent)中通过绑定属性<Son :counter="counter"></Son>

在子组件(son)中通过props: {counter: {type: Number}}来接受数据,接收后在子组件中可正常使用数据。

2、方法的传递(子组件使用父组件的方法)

     在父组件(parent)中通过绑定属性<Son @change="change"></Son>

在子组件(son)中通过this.$emit('change', payload)来触发父中的方法。(payload是子组件需要传递给父组件的数据,父组件中的方法通过形参接收)

二、通过$parent触发祖辈中的方法

     在后代组件中,可以通过this.$parent.$emit('change', payload)来触发祖辈组件中的change()方法并传递数据,直到在祖辈组件中找到并成功触发(祖辈组件通过该方法的形参接收数据)。

三、$dispatch触发祖辈中的方法

     首先在项目入口处,给Vue原型上挂一个$dispatch()方法

Vue.prototype.$dispatch = function (eventName, value) {
    let parent = this.$parent;
    while (parent) {
        parent.$emit(eventName, value)
        parent = parent.$parent
    }
}

之后可在后代组件中使用this.$dispatch('change', payload)触发祖辈组件中的方法,同时可以携带数据。祖辈组件中通过该方法的形参接受数据。

四、.sync传递数据

     .sync是<Son :counter="counter" @update:counter="value=>this.counter=value"></Son>的语法糖。使用时通过<Son :counter.sync="counter"></Son>将组件中的数据传递给后代组件。

后代组件通过props: {counter: {type: Number}}接收数据。同时,后代组件可通过this.$emit('update:counter', payload)实现将父组件中的数据更新为payload。此方法只适用于更新数据无法做其他操作。

五、v-model传递数据

     v-model是数据counter值和input方法的语法糖。在组件中通过<Son v-model="counter"></Son>将组件中的数据传递给后代组件。

后代组件通过props: {counter: {type: Number},value: {type:Number}}接收数据,并且通过this.$emit('input', payload)实现将父组件中的数据更新为payload。此方法只适用于更新数据无法做其他操作。

六、$attrs接收数据

     $attrs仅仅是等同于props的一种结束数据的方法,不与props同时存在。

父组件通过属性传递的方式将数据和方法穿的给子组件。

子组件可通过$attrs将数据和方法全部接收,并通过同属性传递相同的方式触发父中的方法,并将数据传递给父组件中的方法。

若想继续将数据与方法传递给后代组件,可通过<Grandson v-bind="$attrs"></Grandson>进行传递,在后代组件中可以通过上述的几种触发祖辈组件中的方法的方式触发祖辈组件中的方法,并传递数据。

七、$listeners触发传递过来的方法

     在组件中通过<Son @click="change"></Son>将change事件传递给子组件。

子组件通过<button @click="$listeners.click">Son</button>触发父中的change事件。

此方式仅仅是触发事件,不能传递数据。

八、ref触发子组件中的方法

     组件可以通过ref的方式来触发子组件中的方法。在组件中通过<Son ref="son"></Son>方式给子组件取别名。再通过 this.$refs.son.sonchange()来触发子组件中的方法。

九、eventbus总线方式(触发方法,传递数据)

     首先在入口中Vue.prototype.$bus = new Vue()给Vue原型上挂一个$bus,他是一个Vue实例。

之后在祖辈组件中给$bus中注册一个方法,方法名是changeBus

 this.$bus.$on('changeBus', (payload) => {
      window.console.log("changeBus.......", payload)
    })

在后代组件中通过总线可以触发changeBus()方法

this.$nextTick(() => {
      // 发布
      this.$bus.$emit("changeBus",200)
    })

此方式可以传递数据,数据作为形参使用。

十、provide、inject(两者是配合使用的)

     在祖辈组件中通过provide提供数据(位于export default{}中)

export default {
  // 在父组件中提供name数据
  provide() {
    return {
      name: "wangcai"
    }
  }
}

在后代组件中可通过inject: ['name'],将数据注入组件中。在后代组件中可正常使用数据。

十一、$parent和$root(可用于兄弟组件间)

     在两组间拥有共同的父组件是,可以通过父组件搭桥的方式触发兄组件中的方法,并传递数据

//在Son1中
this.$parent.$on('foo', (payload)=>{
console.log(payload)
})
//在Son2中
this.$parent.$emit('foo',200)

此方式可用于兄弟组件间的通信。