Vue3 可以允许出现多个根节点
片段Vue3 一个模板不再限制有多个根节点(多个根节点上的 Attribute 继承) 需要显式定义 attribute 应该分布在哪里。否则 控制台会给出警告提示<template><header></header><main v-bind="$attrs"></main> <!-- 父组件传的方法和参数可以通过 $attrs 访
·
片段
- Vue3 一个模板不再限制有多个根节点
- (多个根节点上的 Attribute 继承) 需要显式定义 attribute 应该分布在哪里。否则 控制台会给出警告提示
<template>
<header></header>
<main v-bind="$attrs"></main>
<!-- 父组件传的方法和参数可以通过 $attrs 访问 ,子组件 props 和 emits 中 出现的方法和参数不会出现在 $attrs 中-->
<footer></footer>
</template>
$attrs
- 包含了父作用域中不作为组件
props
或自定义事件的attribute
绑定和事件。当一个组件没有声明任何prop
时,这里会包含所有父作用域的绑定,并且可以通过v-bind="$attrs"
传入内部组件 $attrs
包含所有的attribute
,这使得把它们全部应用到另一个元素上更加容易(包括style和class)
- 包含了父作用域中不作为组件
非 Prop 的 Attribute
- 一个非
prop
的attribute
是指传向一个组件,但是该组件并没有相应props
或emits
定义的attribute
- 大致就是父组件中定义了属性和方法,子组件内部没有定义props和emits或者是定义了没有完全接收父组件传过来的全部的属性和方法,这些属性和方法就会被添加到 attribute 中
- 一个非
Attribute 继承
- 当组件返回单个根节点时,
非 prop attribute
将自动添加到根节点的attribute
中
- 当组件返回单个根节点时,
禁用 Attribute 继承
- 如果你不希望组件的根元素继承
attribute
,你可以在组件的选项中设置inheritAttrs: false
。 - 可以使用
v-bind
来规定非 Prop 的 Attribute
应用到哪个元素上
- 如果你不希望组件的根元素继承
app.component('date-picker', {
inheritAttrs: false,
template: `
<div class="date-picker">
<input type="datetime-local" v-bind="$attrs" />
</div>
`
})
<!-- Date-picker 组件 使用非 prop attribute -->
<date-picker data-status="activated"></date-picker>
<!-- 渲染 date-picker 组件 -->
<div class="date-picker">
<input type="datetime-local" data-status="activated" />
</div>
更多推荐
已为社区贡献7条内容
所有评论(0)