组件间的通信方式

组件间的通信方式

组件间主要有以下3种通信方式。

父子组件间的通信

基础的传递操作不再赘述，这里只说明一些重要的注意点。

1，父传子：相信大家对父传子都很熟悉，但是其实在这个过程中也是有很多注意事项的。

（1）props的两种常见用法：

​ 方式一：字符串数组，数组中的字符串就是属性的名称，数组用法中我们只能说明传入的属性名称并不能对其进行任何形式的限制，所以一般不建议使用。

props: ['title', 'content']

​ 方式二：对象类型，对象类型允许我们在指定属性名称的同时，指定它需要传递的类型、是否是必须的、默认值等等，所以接下来我们主要来说一下props在进行数据类型验证时的一个注意点：

//数组或对象的默认值必须从函数中获取
info: {
    type: Object,
    default() {
    	return {name: "why"}
    }
},

（2）非props属性的使用

当我们传递给子组件某个属性时，而该子组件中并没有定义对应的props时，该属性便被称为非props属性，常见的包括class，style，id，那么该属性最终其实是会被自动添加到该组件的根元素中去。当然，如果我们希望该属性被组件的其他元素继承而不是根元素，那么是可以在组件中设置inheritAttrs: false从而禁止根节点继承该属性，与此同时便要求必须通过$attrs.非props属性名称的形式去在组件中的其他元素中使用，否则会报错。如下：

<template>
  <div>
    //第二步：使用以下方式在所想要使用的地方使用
    <h2 v-bind="$attrs">{{title}}</h2>
  </div>
</template>

<script>
  export default {
	//第一步：禁止根节点继承非props
    inheritAttrs: false,
    props: {
      title: String
    }
  }
</script>

2，子传父：（需要注意的是：相对于vue2，vue3中需要通过emits选项显示声明哪些函数可以被触发，其他地方和vue2类似）

子组件：

<template>
  <div>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

    <input type="text" v-model.number="num">
    <button @click="incrementN">+n</button>
  </div>
</template>

<script>
  export default {
    emits: {
      add: null,
      sub: null,
      addN: (num, name, age) => {
        console.log(num, name, age);
        if (num > 10) {
          return true
        }
        return false;
      }
    },
    data() {
      return {
        num: 0
      }
    },
    methods: {
      increment() {
        this.$emit("add");
      },
      decrement() {
        this.$emit("sub");
      },
      incrementN() {
        this.$emit('addN', this.num, "why", 18);
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <h2>当前计数: {{counter}}</h2>
    <counter-operation @add="addOne" 
                       @sub="subOne"
                       @addN="addNNum">
    </counter-operation>
  </div>
</template>

<script>
  import CounterOperation from './CounterOperation.vue';

  export default {
    components: {
      CounterOperation
    },
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      addOne() {
        this.counter++
      },
      subOne() {
        this.counter--
      },
      addNNum(num, name, age) {
        console.log(name, age);
        this.counter += num;
      }
    }
  }
</script>

以上便是我们在进行父子组件间通信时需要注意的地方了。

Provide和Inject（依赖注入）

官网并不建议在应用中直接使用该办法，理由很直接：他怕你"管不好"，设计项目，通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护，然而这对选项支持任意层级都能访问，导致数据追踪比较困难，不知道那一层级声明了provide又或是哪些层级使用了inject，造成比较大的维护成本。因此，除组件库或高阶插件外，Vue不建议通过依赖注入来进行组件的通信。

//父组件	
setup() {
    const name = ref("coderwhy");
    let counter = ref(100);

    provide("name", readonly(name));
    provide("counter", readonly(counter));

    const increment = () => counter.value++;

    return {
        increment,
        counter
    }
}

//子组件
setup() {
    const name = inject("name");
    const counter = inject("counter");

    const homeIncrement = () => counter.value++

    return {
        name,
        counter,
        homeIncrement
    }
}

事件总线

Vue3从实例中移除了 $on、$off 和 $once这几个方法，所以我们如果希望继续使用事件总线的话，就需要通过mitt这个第三方库：

首先，我们需要先安装这个库：

npm install mitt

其次，我们为了避免对其的依赖，因此需要封装成一个单独的eventbus.js文件：

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

工具的基本使用

我们可以在某个组件中触发事件：

//在这里我们就只需要引入我们封装的emitter函数就行了
import emitter from './utils/eventbus';

export default {
    methods: {
        btnClick() {
            emitter.emit("why", {name: "why", age: 18});
        }
    }
}

然后我们便可以在某个组件中去监听该事件：

import emitter from './utils/eventbus';

export default {
    created() {
        emitter.on("why", (info) => {
            console.log("why:", info);
        });

        emitter.on("kobe", (info) => {
            console.log("kobe:", info);
        });

        emitter.on("*", (type, info) => {
            console.log("* listener:", type, info);
        })
    }
}

mitt事件的取消

//取消对emitter中所有事件的监听
emitter.all.clear();

//定义一个函数
function  onFoo() {}
emitter.on("onFoo", onFoo) //监听
emitter.off("onFoo", onFoo)  //取消监听