Vue 父子组件传参、插槽

setup 函数中有两个主要的参数：props、context 。

props 用于接收父组件传递过来的数据，父传子。

context 指的是 setup 的上下文，它有三个属性：attrs、slots、emit 。

attrs 用于：当父组件传递过来的数据，没有被 props 接收时，数据就会存放在 attrs 属性中。

slots 用于：接收父组件传递过来的插槽内容，相当于 vue2 中的 `this.$slots` 。

emit 用于：创建自定义事件函数，子传父。相当于 vue2 中的 `this.$emit` 。

setup 函数中的 props 参数【父传子】

父组件：

子组件：

效果：

 props 参数的几种接收方式

无限制接收：

props: ['name', 'sex', 'age']

限制数据类型接收：

props: {
  name: String,
  age: Number,
  sex: String
}

限制数据类型、默认值、是否必填接收：

props: {
  name: {
    type: String,
    required: true // 是否必填
  },
  age: {
    type: Number,
    required: true // 是否必填
  },
  sex: {
    type: String,
    default: '保密' // 设置默认值
  }
}

context 参数中的 attrs 属性【子传父】

父组件：

效果：

 context 参数中的 slots 属性【默认插槽】 

父组件：

子组件：

 

效果：

 context 参数中的 emit 属性【子传父】

父组件：

 子组件：

效果：

 

原创作者：吴小糖

创作时间：2023.10.26