网站建设感谢信,网站建设的软件是哪个好,wordpress搜索过滤,seo企业优化方案前言
Vue 3 现在正式支持了多根节点的组件#xff0c;也就是片段#xff01;
Vue 2.x 遵循单根节点组件的规则#xff0c;即一个组件的模板必须有且仅有一个根元素。
为了满足单根节点的要求#xff0c;开发者会将原本多根节点的内容包裹在一个div元素中#x…前言
Vue 3 现在正式支持了多根节点的组件也就是片段
Vue 2.x 遵循单根节点组件的规则即一个组件的模板必须有且仅有一个根元素。
为了满足单根节点的要求开发者会将原本多根节点的内容包裹在一个div元素中
!-- Layout.vue --
templatedivh1标题/h1p段落/p/div
/template这是因为Vue 的编译器在解析组件模板时是基于单根节点的树形结构进行处理的。如果存在多个根节点编译器无法明确地构建组件的虚拟 DOM 结构。
因此在Vue 2.x中父组件在使用子组件时写在子组件上的 class、style 和 id 等属性会直接传递到子组件的根元素上。
Vue 3.x 打破了 Vue 2.x 中组件模板必须有且仅有一个根元素的限制现在组件可以包含多个根节点。
templateh1标题/h1p段落/p
/template当组件存在多个根节点时在父组件中给该组件传递属性attribute就需要明确指定这些属性应该绑定到哪个根节点上。如果不进行显式指定Vue 无法确定属性的归属。
templateChildComponenttemplate v-slot:default{ attrs }div v-bindattrs这是一个 div 根节点/divp这是一个 p 根节点/pspan这是一个 span 根节点/span/template/ChildComponent
/template在示例中通过v-slot:default{attrs}获取到ChildComponent.vue通过插槽传递给父组件的所有属性存储在attrs中然后使用v-bindattrs将这些属性显式地绑定到其中一个根节点div上。
Attributes 继承
“透传 attribute”指的是传递给一个组件却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。
当一个组件以单个元素为根作渲染时透传的 attribute 会自动被添加到根元素上。
最常见的例子就是 class、style 和 id。
子组件ChildComponent.vue的模板内容如下
div这是子组件的div/div在父组件使用子组件ChildComponent.vue并且传入了 class、style 和 id
templatedivh1父组件/h1ChildComponent classchild-div idchild-divstylefont-size: 20px; color: brown; //div
/template
script setup langts
import ChildComponent from ./ChildComponent.vue;
/script渲染出的DOM结果是
div classchild-div idchild-div stylefont-size: 20px; color: brown这是子组件的div
/divChildComponent 并没有将 class、style 和 id声明为它所接受的 prop所以 class、style 和 id被视作透传 attribute自动透传到了 ChildComponent 的根元素上。
当 style 属性透传到子组件的根元素后它的生效方式与直接在 HTML 元素上设置 style 属性是一样的
自动合并 class 或 style
如果一个子组件的根元素已经有了 class 或 style attribute它会和从父组件上继承的值合并。
给子组件ChildComponent.vue加上class、style、id属性
divclasschild-boxidchild-boxstylepadding: 15px; background-color: #f8f8f8
这是子组件的div
/div渲染出的DOM结果是
divclasschild-box child-dividchild-divstylepadding: 15px;background-color: rgb(248, 248, 248);font-size: 20px;color: brown;
这是子组件的div
/div子组件的class、style 属性值 和 从父组件上继承的值合并子组件的 id 属性值被从父组件继承的 id 属性值覆盖。
页面渲染结果如下图
v-on 监听器继承
子组件ChildComponent.vue的模板内容如下
div clickconsole.log(子组件的点击事件被触发了) 这是子组件的div /div在父组件中给ChildComponent绑定一个点击事件
templatediv classhome-wraph1父组件/h1ChildComponent clickconsole.log(在父组件中给子组件绑定的点击事件被触发了)//div
/template
script setup langts
import ChildComponent from ./ChildComponent.vue;
/script父组件中绑定的click 监听器会被添加到 ChildComponent 的根元素子组件的 div 元素之上。 子组件的div元素自身也通过 v-on 绑定了一个事件监听器。
当点击子组件的div元素子组件的click监听器和从父组件继承的监听器都会被触发
深层组件继承
有些情况下一个组件会在根节点上渲染另一个组件。
当ChildComponent.vue的根节点渲染的是另一个组件GrandChild.vue时
!-- ChildComponent.vue 的模板只是渲染另一个组件GrandChild / --
templateGrandChild /
/template此时 ChildComponent 接收的透传 attribute 会直接继续传给 GrandChild。
注意 透传的 attribute 不会包含 ChildComponent 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数换句话说声明过的 props 和侦听函数被 ChildComponent “消费”了。 透传的 attribute 若符合声明也可以作为 props 传入 GrandChild。
禁用 Attributes 继承
在选项式API中在组件选项中设置 inheritAttrs: false 可以禁止 组件自动地继承 attribute。
在组合式API中在 script setup 中使用 defineOptions
script setup
defineOptions({inheritAttrs: false
})
// ...setup 逻辑
/script通过设置 inheritAttrs 选项为 false可以完全控制透传进来的 attribute 被如何使用。
注意透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。
在ChildComponent.vue中设置 inheritAttrs: false 并通过$attrs访问透传属性 customValue
!-- ChildComponent.vue 的模板 --
templatediv在ChildComponent.vue中读取透传 Attributes: {{ $attrs.customValue }}/div
/template
script setup langts
defineOptions({inheritAttrs: false
})
/script在父组件中使用子组件ChildComponent.vue传递class属性、customValue属性
templatediv classhome-wraph1父组件/h1ChildComponent classchild-div :customValuecustomValue //div
/template
script setup langts
import { ref } from vue;
import ChildComponent from ./ChildComponent.vue;
const customValue ref(10)
/script渲染出的DOM结果是
div在ChildComponent.vue中读取透传 Attributes: 10/div可以看到父组件传的class属性并没有被直接透传到子组件的根元素上。
通过Vue Devtools查看$attrs$attrs 包含了 透传进来的 class、customValue属性 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute例如 classstylev-on 监听器等等。 和 props 有所不同透传 attributes 在 JavaScript 中保留了它们原始的大小写所以像 foo-bar 这样的一个 attribute 需要通过 $attrs[foo-bar] 来访问。 像 click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。
通过设定 inheritAttrs: false 和使用 v-bind$attrs 来实现将 透传 attribute 应用在合适的元素上
!-- ChildComponent.vue 的模板 --
templatedivdiv v-bind:$attrs在ChildComponent.vue中读取透传 Attributes: {{ $attrs.customValue }}/div/div
/template
script setup langts
defineOptions({inheritAttrs: false
})
/script渲染出的DOM结果是
divdiv classchild-div customvalue10在ChildComponent.vue中读取透传 Attributes: 10/div
/div通过不带参数的 v-bind将一个对象的所有属性都作为 attribute 应用到目标元素上。
多根节点的 Attributes 继承
和单根节点组件有所不同有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定将会抛出一个运行时警告。
修改ChildComponent.vue
!-- ChildComponent.vue 的模板 --
templateh2ChildComponent的标题/h2divChildComponent的内容/div
/template此时ChildComponent.vue是多根节点模板由于 Vue 不知道要将 attribute 透传到哪里所以会抛出一个警告 Extraneous non-props attributes (class, customValue) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
当ChildComponent.vue有多个根节点时需要显式绑定 $attrs
!-- ChildComponent.vue 的模板 --
templateh2 v-bind$attrsChildComponent的标题/h2divChildComponent的内容/div
/template在 JavaScript 中访问透传 Attributes
在选项式API中attrs 会作为 setup() 上下文对象的一个属性暴露
script
export default {setup(props, ctx) {// 透传 attribute 被暴露为 ctx.attrs且 没有响应性console.log(ctx.attrs)}
}
/script在组合式API中在 script setup 中使用 useAttrs() API 来访问一个组件的所有透传 attribute
script setup
import { useAttrs } from vue
const attrs useAttrs()
/script有个疑问待解决 官网说法attrs 对象总是反映为最新的透传 attribute但它没有响应性不能通过侦听器去监听它的变化。 我直接在模板中使用$attrs以及使用上述2种方式获取attrs修改透传 attribute 后页面也更新了。 所以没get到官方说的attrs对象没有响应性是指哪方面。 知道为什么的童鞋可以在评论区讲一下或者是私信给我说一下非常感谢
