前言：开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

Vue父子组件间通信

props/$emit

• 父子组件之间如何进行通信呢？
  • 父组件传递给子组件：通过props属性；
  • 子组件传递给父组件：通过$emit触发事件；

父组件传递给子组件

• 在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：
  • 这个时候我们可以通过props来完成组件之间的通信；
• 什么是Props呢？
  • Props是你可以在组件上注册一些自定义的属性；
  • 父组件给这些属性赋值，子组件通过属性的名称获取到对应的值；
• Props有两种常见的用法：
  • 方式一：字符串数组，数组中的字符串就是attribute的名称；
  • 方式二：对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等；

子组件传递给父组件（通过事件形式）

在子组件里面先监听对应事件的点击；监听到事件的点击通过emit发出一个自定义事件可传递参数,通过自定义事件名称监听这个事件，监听到后父组件绑定在一个方法中然后在methods中实现这个方法。

在子组件中可以加一个emits:[]里面定义的是组件内部发出的所有自定义事件，在这里可注册。

• 案例

<template>
 <div class="main">
   <sub-component :list="list" @list="listTap" />
   <div>name:{{ text }}</div>
 </div>
</template>

<script>
import subComponent from "./components/subComponent.vue";

export default {
 name: "App",
 components: {
   subComponent,
 },
 data() {
   return {
     list: ["衣服", "鞋子", "裤子"],
     text: "",
   };
 },
 mounted() {
   this.text = this.list[0];
 },
 methods: {
   listTap(i) {
     this.text = this.list[i];
   },
 },
};
</script>

子组件subComponent.vue

<template>
 <div class="list">
   <div class="con-list" v-for="(item, i) in list" :key="i" @click="listBg(i)">
     <span class="item" :class="i == listIndex ? 'border' : ''">
       {{ item }}
     </span>
   </div>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 props: {
   list: Array,
 },
 emits: ["list"],
 data() {
   return {
     listIndex: 0,
   };
 },
 methods: {
   listBg(i) {
     this.listIndex = i;
     this.$emit("list", i);
   },
 },
};
</script>