Vue3的多根节点组件与父子组件之间的事件继承

多根节点组件

        Vue.js 3.x 版本不再对组件的 template 选项进行“唯一根节点”的限制，而是允许 DOM 结构具备多个根节点，即下列结构的全局组件在 Vue.js 3.x 版本中是允许的。

app.component('my-box',{

        template:`

                <div class="first">第一个节点</div>

                <div class="second">第二个节点</div>

                <div class="third">第三个节点</button>

        `

})

本节对这种结构可能出现的问题以及 Vue 框架的语法要求进行讲解。

1、 非 Prop 属性

        在使用组件时，被子组件通过 props 选项接收的属性被称为“ Prop 属性”，没有被子组件的 props 选项接收的属性被称为“非 Prop 属性”。 Vue 框架规定： Prop 属性可以向子组件数据区那样进行调用，即使用 this 就可以访问到 Prop 属性；非 Prop 属性需要在子组件中使用 this.$attrs 来进行访问。

        【示例 4-15 】 非 Prop 属性的访问 。注册一个全局组件名为 my-phone ，其中设置一个 Prop 属性名为brand，再设置一个非 Prop 属性名为 count 。最终在组件的 template 选项中设置两个 div 容器访问这两个属性。

HTML 文档中对 my-phone 组件使用的代码如下所示。

<div id="app">
    <my-phone brand="HuaWei" :count="150"></my-phone>
</div>

Vue 代码如下所示。

01 let app=Vue.createApp({})
02     app.component('my-phone',{
03         template:`
04             <div class="brand">品牌：{{this.brand}}</div>
05             <div class="count">数量：{{this.$attrs.count}}</div>
06         `,
07     props:['brand']
08 })
09 app.mount('#app')

        上述代码中，<my-phone> 在 HTML 代码中设置了两个参数： brand 和 count 。在组件注册的代码中，第07 行将 brand 参数利用 props 选项进行接收，形成了 Prop 属性。而 count 参数没有用 props 选项进行接收，即是一个非 Prop 属性。

        在组件的 template 模板中，第 04 行访问了 Prop 属性 brand ，使用的是 this.brand 格式。第 05 行访问了非 Prop 属性 count ，使用的是 this.$attrs.count 格式。

        这里需要注意，非 Prop 属性也是单向数据流传递，即不能在组件注册代码中改变该属性的值，也不能将该变量通过 v-model 绑定在表单元素中。

        同理，在使用组件时绑定的自定义事件，也可以通过 this$attrs 获取。与非 Prop 属性不同的是，绑定事件的名称，在 this.$attrs 中需要添加 on_ 前缀。

        【示例 4-16 】 通过 this.$attrs 触发组件的事件 。注册一个全局组件名为 my-alert ，为该组件设置一个名为 message 的属性，在绑定一个名为 custom 的自定义事件。

HTML 文档中对 my-alert 组件使用的代码如下所示。

<div id="app">
    <my-alert message="非 Prop 属性的使用" @custom="custom"></my-alert>
</div>

Vue 代码如下所示。

01 let app=Vue.createApp({
02 methods:{
03 custom(value){
04 window.alert(value)
05 }
06 }
07 })
08 app.component('my-alert',{
09 template:`
10 <button @click="btnClick">单击</button>
11 `,
12 methods:{
13 btnClick(){
14 this.$attrs.onCustom(this.$attrs.message);
15 }
16 }
17 })
18 app.mount('#app')

        在上述代码中，HTML 文档使用 <my-alert> 组件时，设置了一个自定义属性 message ，同时绑定了一个自定义事件 custom 。由于在组件定义的 Vue 代码中，没有使用 props 来接收自定义属性 message ，因此message 是一个非 Prop 属性。对于绑定的自定义事件，可以在组件中使用 this.$emit() 进行调用，也可以使用 this.$attrs 进行访问。

        从第 14 行中可以看出，自定义事件 custom 在 this.$attrs 对象中存储为 onCustom ，这是读者需要注意的地方，触发该事件时，需要使用 this.$attrs.onCustom() 来实现。

2、 组件事件的继承

        Vue.js 3.0 框架规定：父组件的事件可以直接继承给具备该事件的子组件及其后代组件。

 

        【示例 4-17 】 组件事件的继承 。书写一个用于选择专业的组件 select-specialty 。该组件中具备一个可供选择专业的下拉菜单。当用户选择某个专业的菜单项时，需要用弹窗在页面中显示选中的专业内容。

 

        从本示例的要求来看，应该为组件中的下拉菜单绑定 input 或 change 事件，为了体现出组件事件的可传递性，我们将预计绑定到下拉菜单的 input 事件绑定在该组件的父组件中。测试该功能是否能够实现。

HTML 文档中对 select-specialty 组件使用的代码如下所示。

<div id="app">
    <select-specialty @input="boxInput"></select-specialty>
</div>

Vue 代码如下所示。

01 let app=Vue.createApp({
02 methods:{
03 boxInput(){
04 window.alert(event.target.value);
05 }
06 }
07 })
08 app.component('select-specialty',{
09 template:`
10 <select v-model="specialty">
11 <option>前端工程师</option>
12 <option>PHP 工程师</option>
13 <option>Java 工程师</option>
14 <option>UI 设计师</option>
15 <option>项目架构师</option>
16 </select>
17 `,
18 data(){
19 return {
20 specialty:'UI 设计师'
21 }
22 }
23 })
24 app.mount('#app')

        在上述代码中，input 事件绑定在了 HTML 文档中使用 <select-specialty> 组件的代码中，即该组件的父组件中。由于父组件中的事件子组件成员（即<select> 标记对）也有，因此该事件会传递给子组件成员。

 

        若不希望父组件的事件传递给子组件，可以在子组件的定义代码中使用 inheritAttrs 选项，该选项取值为 false 时，this.$attrs 对象依然可以收集父组件传递过来的属性和绑定的事件，但是父组件绑定的事件不会在继承给子组件成员，即子组件成员的相应事件触发后，也不会执行任何父组件事件的代码。

若要让组件 select-specialty 进制父子组件之间的事件传递，代码如下所示。

01 app.component('select-specialty',{
02     inheritAttrs: false,
03     template:`
04         <select v-model="specialty">
05             <option>前端工程师</option>
06             <option>PHP 工程师</option>
07             <option>Java 工程师</option>
08             <option>UI 设计师</option>
09             <option>项目架构师</option>
10         </select>
11     `,
12     data(){
13         return {
14             specialty:'UI 设计师'
15         }
16     }
17 })

        在上述代码中，第 02 行为组件设置了 inheritAttrs 选项，并取值为 false ，这样父组件绑定的 input 事件在第 04 行的 <select> 子组件成员中就不会起作用了。

3、 多根节点组件的规定

        从 Vue.js 3.x 框架开始，组件的 template 选项可以接收多个根节点结构。在 Vue.js 2.x 框架中，对 template选项有必须是一个根节点的限制。

        若组件具备多个根节点，同时父组件绑定了事件，根据默认情况下父组件的事件会继承给子组件的这一特性，Vue 框架会报出一个警告。警告内容如下所示。

       

        [Vue warn]: Extraneous non-emits event listeners (click) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

        上述警告的含义是：外部的（即父组件）的非触发的事件监听器（单击事件）被传递给子组件，但是不能自动继承，因为组件将渲染为片段或文本根节点。如果侦听器只是组件自定义事件的侦听器，则需要使用“emit ”选项来声明它。

        上述警告的解决方案有以下两个：

         禁止父组件向子组件继承事件：即在子组件中书写 inheritAttrs:false 选项。

         在子组件中需要继承父组件事件的根节点上显式绑定 $attrs ，这被称为“隐式贯穿”行为。

 

        【示例 4-18 】 多根节点组件的事件继承 。书写一个名为 root-test 的组件，其中包含三个根节点。在父组 件中绑定单击事件，显式指定第二个根节点继承父组件的事件。

        HTML 文档中对 select-specialty 组件使用的代码如下所示。

<div id="app">
    <root-test @click="divClick"></root-test>
</div>

Vue 代码如下所示。

01 let app=Vue.createApp({
02     methods:{
03         divClick(){
04             window.alert(event.target.textContent);
05         }
06     }
07 })
08 app.component('root-test',{
09 // inheritAttrs: false,
10     template:`
11         <div class="first">第一个根节点</div>
12         <div class="second" v-bind="$attrs">第二个根节点</div>
13         <div class="third">第三个根节点</div>
14     `
15 })
16 app.mount('#app')

        Vue 框架的官网指出：与单个根节点组件不同，具有多个根节点的组件不具有自动隐式贯穿行为（ Auto fallthrough）。若未显式绑定 $attrs ，则会在运行时发出警告。

        在上述代码中，第 10 行至第 14 行定义了组件中存在的三个根节点，同时父组件上绑定了 click 事件。 要想放置警告的发生，可以将第 09 行注释变为语句，禁止父组件将事件传递给子组件成员，这也是我们讲解的第一种警告解决方案。也可以像第 12 行那样，使用 v-bind 绑定 $attrs ，这样就指定了只有第二个根节点可以继承父组件的事件，同时也不会在运行时发出警告了。