vue change事件_八种 Vue 组件间通讯方式合集

前言

Vue 提供了各种各样的通讯,其中包括兄弟间的通讯和非兄弟间的通讯,借此机会做个总结，查阅起来方便。如果喜欢的话可以帮忙点个赞 ? 或者关注一下 ?

1、props

目录结构

components
   ├── Parent.vue   // 父亲
   ├── Son1.vue     // 儿子1

代码结构

在父亲组件中使用儿子组件，给儿子通过:date="xxx"单向传值

<div><div>爸爸:{{date}}div><Son1 :date="date">Son1>div>
</template>

儿子组件通过props接受父组件传过来的值

<div>儿子:{{date}}div>
</template>

.sync

目录结构

components
   ├── Parent.vue   // 父亲
   ├── Son1.vue     // 儿子1

代码结构

子组件通过$emit("update:xxx")发射事件

<div><div>儿子:{{date}}div><button @click="changeNum">修改button>div>
</template>

<Son1 :date.sync="date">Son1>
//这个写法是上面的替代品 默认组件内部触发 update:count 规定写法
<Son1 :date="date" @update:date="val=>date=val">Son1>

v-model

目录结构

components
   ├── Parent.vue   // 父亲
   ├── Son1.vue     // 儿子1

代码结构

子组件触发的事件只能是input事件,接收props的属性名只能叫value

<div><div>儿子:{{value}}div><button @click="changeNum">修改button>div>
</template>

<Son1 :value="value" @input="val=>value=val">Son1>
//这个写法是上面的替代品 默认组件内部触发 input 规定写法
<Son1 v-model="value">Son1>

v-model 局限只能传递一个属性 如果只有一个 可以使用v-model 多个依然需要使用.sync

3、$parent和 $children

目录结构

components
   ├── Parent.vue   // 父亲
   ├── Son1.vue     // 儿子1
   ├── Grandson1.vue  //孙子1

代码结构

如下场景:孙子想要给爷爷传递数据,孙子需要找到爷爷身上的事件去传递$parent.$emit

<div><div>孙子{{value}}div><button @click="$parent.$emit('change',3)">修改button>div>
</template>

爸爸身上给孙子自定义change事件

<div><div>爸爸:{{value}}div><Son1 @change="val=>value=val" :value="value">Son1>div>
</template>

如果层级很深那么就会出现$parent.$parent.....我们可以封装一个$dispatch方法向上进行派发

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

相同的道理，如果既然能够向上寻找父亲，就能向下寻找儿子，也可以封装一个向下派发的方法$broadcast

Vue.prototype.$broadcast = function $broadcast(eventName, data) {
  const broadcast = function () {
    this.$children.forEach((child) => {
      child.$emit(eventName, data);
      if (child.$children) {
        $broadcast.call(child, eventName, data);
      }
    });
  };
  broadcast.call(this, eventName, data);
};

4、$attrs和 $listeners

目录结构

components
   ├── Parent.vue   // 父亲
   ├── Son1.vue     // 儿子1
   ├── Grandson1.vue  //孙子1

$attrs批量向下传入属性

<div><div>爸爸:{{value}}div><Son1 @change="val=>value=val" :value="value">Son1>div>
</template>

在儿子组件中使用 $attrs 属性,配合v-bind可以将属性继续向下传递

<div><div>儿子:{{$attrs.value}}div><grandson1 v-bind="$attrs">grandson1>div>
</template>

注意一点：在使用 $attrs 的时候，如果组件中使用了props 就会将属性从当前 attrs移除掉

在孙子组件中使用 $attrs属性,可以将属性继续向下传递

<div><div>孙子{{$attrs.value}}div>div>
</template>

可以在 son1 组件中使用$listeners属性,配合v-on可以将方法继续向下传递

<div><div>儿子:{{$attrs.value}}div><grandson1 v-bind="$attrs" v-on="$listeners">grandson1>div>
</template>

孙子组件可以直接使用$listeners上的方法

<div><div>孙子{{$attrs.value}}div><button @click="$listeners.click">button>div>
</template>

<div><div>儿子div>div>
</template>

这里的儿子 2 组件只能使用$on来触发 Grandson1 组件事件

<div>儿子2div>
</template>