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

1,275 阅读3分钟

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

说点题外话

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

说正文

image.png

我们先记住这一句话:父子组件通信中,父组件通过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> 此时页面展示如下

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

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

  • 第二种写法:父组件传递data中定义的值
<son :title="title" :info="info"></son>
        
 // data中定义
 title: "Father标题",
 info: { name: "小白" }

image.png

此时我们发现,父组件通过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)
        }
      },

typeObejct | 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>

image.png

2.2 setup语法糖方式

<script setup>

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

console.log(props);

</script>

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

image.png

说再见

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

难忘今宵

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