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

说点题外话

这一篇开始算是真正踏进vue3的学习中了，可能我记录的会更加详细

说正文

我们先记住这一句话：父子组件通信中，父组件通过props向子组件传递参数，子组件通过$emit向父组件触发方法和参数

一、选项式父子组件通信

首先，子组件通过props接收父组件传递的参数，那么我们现在Son.vue子组件中定义父组件想要传递的参数，这里props接受参数也有两种写法: 数组或者对象

父组件直接引用子组件并且传递参数，父组件传递参数也有两种写法，我会在直接写在下面的案例中，这里不再叙述

1.1 props定义为数组

这里我们传递一个title字符串，再传递一个info对象，在子组件Son.vue中代码如下

Son.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2>{{ info }}</h2>
  </div>
</template>

<script>
  export default {
    props: ["title", "info"]
  }
</script>

Father.vue - 第一种写法：父组件直接从mustache语法中传递 js <son title="Father标题" info="{name:'小白'}"></son> 此时页面展示如下

我们会想我直接拿到info.name可以吗，我们修改Son.vue代码如下并尝试 js <h2>{{ info.name }}</h2>

发现直接从mustache这种方式传递对象的值，在子组件通过props数组的方式接收并不能解构对象的值。

第二种写法：父组件传递data中定义的值

<son :title="title" :info="info"></son>
        
 // data中定义
 title: "Father标题",
 info: { name: "小白" }

此时我们发现，父组件通过data中定义的变量，子组件props通过数组的方式也可以对对象进行解构

1.2 props定义为对象

这里我就省去重复代码了，父组件两种方式我们常用的还是定义在data中传递，这里父组件就直接使用我们日常常用的这种方式

father.vue

<son :title="title" :info="info"></son>

  data() {
    return {
      title: "Father标题",
      info:{
        name: "小白"
      }
    }
  },

Son.vue

props是对象类型，里面直接定义变量和变量个类型即可，直接在案例里详说

只指定类型下面这种写法，我们规定了变量的类型，但是没有设置初始值，设置初始值的方式有两种

  props: {
    title: String,
    info: Object
  }

设定初始值

通过隐式定义规定类型

  props: {
    title: "",
    info: {}
  }

通过type类型规定类型

  props: {
    title: {
      type: String,
      default: "默认值"
    },
    info: {
      type: Object,
      default: {}
    }
  }

props校验参数可传

下面这段代码校验propsA父组件传递的值是否是success和error中的一个

      propsA: {
        validator(value) {
          return ['success', 'error'].includes(value)
        }
      },

当type为Obejct | Array的时候。default参数最好是写成工厂函数。

如果是对象类型，当子组件重复被使用，对象变量指向的都是同一个内存地址，当父组件更改变量的时候，其他调用的父组件也会跟着改变。
如果是函数类型，变量是return出去的，每次调用都会重新拷贝一个新的变量，调用的父组件之间不会相互影响。

      propB: {
          type: Function,
          default() {
              return 'Default function'
          }
      }

二、组合式父子组件通信

2.1 setup函数方式

如果是setup函数的形式，props 必须以 props 选项的方式声明，props 对象会作为 setup() 函数的第一个参数被传入

在vue3中，只要props这个参数存在，我们就可以直接mustache中使用父组件传递的参数

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2>{{ info.name }}</h2>
  </div>
</template>

<script>
export default {
  props: ['title', "info"],
  setup(props) {
    console.log(props);
  }
}
</script>

2.2 setup语法糖方式

<script setup>

const props = defineProps(["title", "info"])

console.log(props);

</script>

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明

说再见

父子组件通信目前就介绍到这里，下一篇说说非父子组件通信

难忘今宵

皮卡丘站起来以后变成了皮卡兵。

和Vue3和解的Day11--父子组件通信