组件间通信（父传子，子传父）

父传子

1. 父组件通过 props 将数据传递给子组件
2. 子组件利用 $emit 通知父组件修改更新
   父组件里面使用的子组件标签内会写一个自定义属性，这个自定义属性也是props，子组件也是通过props来接收
   
   父组件：

<template>
  <div class="app" style="border: 1px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="content"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  // 组件名字
  name: "App",
  data() {
    return {
      content: "我是爸爸的儿子",
    };
  },
  components: {
    Son,
  },
};
</script>

<style></style>

子组件：

<template>
  <div class="son" style="border: 1px solid #000; margin: 10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{ title }}
  </div>
</template>

<script>
export default {
  // 组件名字
  name: "Son-Child",
  // 2.通过props来接受
  props: ["title"],
};
</script>

<style></style>

什么是 prop

Prop 定义：组件上 注册的一些 自定义属性
Prop 作用：向子组件传递数据
特点：
⚫ 可以 传递== 任意数量 ==的prop
⚫ 可以 传递 ==任意类型 ==的prop

props 校验

思考：组件的 prop 可以乱传么？
作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
语法校验：
① 类型校验
② 非空校验
③ 默认值
④ 自定义校验
如果要进行语法校验，把props由数组形式改为对象形式
校验父组件传过来的数据是否符合要求，如果不符合要求就能及时报错。

子传父

子组件利用 $emit¹通知父组件，进行修改更新

父组件：

<template>
  <div class="app" style="border: 1px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="content" @changeTitle="content = $event"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  // 组件名字
  name: "App",
  data() {
    return {
      content: "我是爸爸的儿子",
    };
  },
  components: {
    Son,
  },
};
</script>

<style></style>

子组件：

<template>
  <div class="son" style="border: 1px solid #000; margin: 10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{ title }}
    <button @click="modify">父亲想要修改儿子</button>
  </div>
</template>

<script>
export default {
  // 组件名字
  name: "Son-Child",
  // 2.通过props来接受
  props: ["title"],
  methods: {
    modify() {
      this.$emit("changeTitle", "我爱爸爸");
    },
  },
};
</script>

<style></style>

---

1. emit是发送的意思，意思是子组件给父组件发送消息通知，父组件对子组件所发送的消息进行监听。目的是收到子组件所传过来的消息并且提供对应的处理函数，并且在父组件的处理函数的形参中可以拿到子组件传过来的消息。
   ↩︎