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

说点题外话

上一篇说了选项式和组合式的父组件给子组件通信的写法：

父传子通过props传递参数，类型可以是数组类型 | 对象类型
对象类型也可以对参数的类型进行限制，并且可以设置默认值
组合式中直接使用defineProps传递参数

我们知道父组件给子组件传递参数之后，我们这一篇看看父组件的非props怎么给子组件传值

说正文

一、父组件向子组件船体参数

上一篇说了父组件向子组件传递参数，但是传递的都是通过props的参数，那么如果是非props的Attribute的参数呢

当我们传递一个组件某个属性，该属性并没有定义对应的props或者$emit时，就会被称之为非props的Attribute，常见的包括class、id、等等。

已知，vue3的temlate模板可以不设置根节点，那么当子组件没有设置根节点，但是父组件在引用使用的时候定义选择器

1. 子组件不设置根节点，父组件不定义选择器

父组件

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

子组件

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

我们会发现此时，组件结构和我们预想的是一样的

2. 子组件不设置根节点，父组件定义选择器

父组件

<son class="box" :title="title"></son>

子组件

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

此时会将父组件的class选择器套在组件外侧作为跟组件的类选择器

3. 子组件不设置根节点且有多个节点，父组件定义选择器

我们将子组件设置多个节点，父组件设置选择器

父组件

<son class="box" :title="title" :message="message"></son>

子组件

<template>
    <h2>{{ title }}</h2>
    <h2>{{ message }}</h2>
</template>

此时，并没有如我们预想的那样，在跟组件的地方绑定上我们父组件的类选择器，这是因为如果子组件有多个节点的时候，父组件不能再自动绑定attribute，需要我们手动绑定

4.手动绑定attribute

父组件

<son class="box" set="set" :title="title" :message="message"></son>

子组件

<template>
    <h2 v-bind="$attrs">{{ title }}</h2>
    <h2>{{ message }}</h2>
</template>

我们在组件间的title变量上绑定attribute，此时父组件传递的所有选择器都会绑定到title这个变量的节点上

5. 不继承根节点信息

当我不想要继承根节点的时候，可以使用inheritAttrs: false设置，可以从$attrs中获取所有的attribute

父组件

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

子组件

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

<script>
export default {
  inheritAttrs: false,
  props: ['title', "message"],
}
</script>

这个时候，子组件并没有继承父组件设置的类选择器

如果我们手动绑定的attribute呢

父组件

<son class="box" set="set" :title="title"></son>

子组件

<template>
    <h2 v-bind="$attrs">{{ title }}</h2>
</template>

<script>
export default {
  inheritAttrs: false,
  props: ['title'],

}

</script>

从展示结果来看，手动绑定的attribute，即使在设置了不继承之后，依旧会被绑定在指定位置，说明这个属性对手动绑定的不生效。

说再见

这一篇结束，父子组件通信就算是全部说完了，下一篇说非父子组件通信

难忘今宵

许仙给白娘子买了一顶帽子，结果白娘子带上之后就不能动了，原来那是一顶压蛇帽。

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