绘本借阅网站开发,海城网站制作建设,网站开发环境安装程序,绿色环保企业网站模板渲染作用域
插槽内容可以访问到父组件的数据作用域#xff0c;因为插槽内容本身是在父组件模板中定义的。举例来说#xff1a;
span{{ message }}/span
FancyButton{{ message }}/FancyButton
这里的两个 {{ message }} 插值表达式渲染…渲染作用域
插槽内容可以访问到父组件的数据作用域因为插槽内容本身是在父组件模板中定义的。举例来说
span{{ message }}/span
FancyButton{{ message }}/FancyButton
这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。
插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域这和 JavaScript 的词法作用域规则是一致的。换言之 父组件模板中的表达式只能访问父组件的作用域子组件模板中的表达式只能访问子组件的作用域。 默认内容
在外部没有提供任何内容的情况下可以为插槽指定默认内容。比如有这样一个 SubmitButton 组件
button typesubmitslot/slot
/button
button typesubmitslotSubmit !-- 默认内容 --/slot
/button 现在当我们在父组件中使用 SubmitButton 且没有提供任何插槽内容时
SubmitButton / “Submit”将会被作为默认内容渲染
button typesubmitSubmit/button
但如果我们提供了插槽内容
SubmitButtonSave/SubmitButton
那么被显式提供的内容会取代默认内容
button typesubmitSave/button
具名插槽
有时在一个组件中包含多个插槽出口是很有用的。举例来说在一个 BaseLayout 组件中有如下模板
div classcontainerheader!-- 标题内容放这里 --/headermain!-- 主要内容放这里 --/mainfooter!-- 底部内容放这里 --/footer
/div
对于这种场景slot 元素可以有一个特殊的 attribute name用来给各个插槽分配唯一的 ID以确定每一处要渲染的内容
div classcontainerheaderslot nameheader/slot/headermainslot/slot/mainfooterslot namefooter/slot/footer
/div
这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 slot 出口会隐式地命名为“default”。
在父组件中使用 BaseLayout 时我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了
要为具名插槽传入内容我们需要使用一个含 v-slot 指令的 template 元素并将目标插槽的名字传给该指令
BaseLayouttemplate v-slot:header!-- header 插槽的内容放这里 --/template
/BaseLayout
动态插槽名
动态指令参数在 v-slot 上也是有效的即可以定义下面这样的动态插槽名
base-layouttemplate v-slot:[dynamicSlotName].../template!-- 缩写为 --template #[dynamicSlotName].../template
/base-layout
作用域插槽
在上面的渲染作用域中我们讨论到插槽的内容无法访问到子组件的状态。
然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。
我们也确实有办法这么做可以像对组件传递 props 那样向一个插槽的出口上传递 attributes
!-- MyComponent 的模板 --
divslot :textgreetingMessage :count1/slot
/div
MyComponent v-slotslotProps{{ slotProps.text }} {{ slotProps.count }}
/MyComponent
