网站平台建设合同模版,wordpress zendesk,wordpress修改备案号,知识网站有哪些可以先阅读组件基础-简单了解通过插槽分发内容。 一、插槽定义
插槽将子组件标签间的内容分发到子组件模板的slot标签位置。
如果没有slot标签#xff0c;那么该内容将被丢弃。 二、编译作用域
内容在哪个作用域编译#xff0c;就可以访问哪个作用域的数据…可以先阅读组件基础-简单了解通过插槽分发内容。 一、插槽定义
插槽将子组件标签间的内容分发到子组件模板的slot标签位置。
如果没有slot标签那么该内容将被丢弃。 二、编译作用域
内容在哪个作用域编译就可以访问哪个作用域的数据。
1.父级模板的作用域
在父组件的模板中定义的变量可以在整个父组件的模板中访问包括子组件中的插槽内容。
例如我们在父组件中定义一个变量url在子组件插槽内容中访问
templatedivnavigation-link url./indexThis URL is {{url}}/navigation-link/div
/template2.子级模板的作用域
在子组件中定义的数据和变量只能在子组件中访问而不能在父组件中访问。 三、后备内容
插槽的后备内容即没有提供内容时的默认内容。
定义方式很简单
slotSlot的默认内容/slot四、具名插槽
顾名思义具有名字的插槽。
你可以为插槽指定名称name以便将内容分发到特定的插槽中。
接着通过在template元素上使用v-slot:插槽名参数指令使用具名插槽
完整示例
!DOCTYPE html
htmlheadtitleVue 2 具名插槽 Demo/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/headbodydiv idappmy-layoutp主要内容的一个段落。/pp另一个主要段落。/ptemplate v-slot:headerh1这里可能是一个页面标题/h1/templatetemplate v-slot:footerp这里是一些联系信息/p/template/my-layout/divscriptVue.component(my-layout,{template:divheaderslot nameheader/slot/headermain!--默认插槽隐含name为default--slot/slot/mainfooterslot namefooter/slot/footer/div})var vm new Vue({el: #app,});/script
/body/html虽然我们故意将默认插槽的内容放在了名为header的代码前面但是结果依然按照插槽原本的顺序排列。 动态插槽名
我们可以使用动态参数绑定插槽名。
template v-slot:[dynamicSlotName]/template具名插槽的缩写
v-slot指令也有缩写即使用#替代v-slot:这样做我们就必须明确给出其插槽名称。 五、作用域插槽
作用域插槽这个概念是指让插槽内容能够访问子组件中才有的数据。
我们只需给slot绑定prop然后使用v-slot的值访问该prop。v-slot的值实际上是所有绑定的prop的集合。
上例子
!DOCTYPE html
htmlheadtitleVue 2 作用域插槽 Demo/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/headbodydiv idappmy-componenttemplate v-slotslotPropsp{{slotProps.text}}/p/template/my-component/divscriptVue.component(my-component, {template: divslot texthello/slot/div})var vm new Vue({el: #app,});/script
/body/html注意上面例子中我们v-slot指令没有带参数实际上它默认带了个default参数如果存在别的具名插槽那么我就必须为v-slot指令带上参数。
通过作用域插槽的机制我们可以实现父组件控制插槽内容来控制子组件渲染不同的结果。 额外的不相关话题使用v-bind指令时什么时候加: 私以为这取决于v-bind绑定的属性的值其值为静态字符串不加:其值若为变量或对象字面量则加:。 解构插槽prop
事实上插槽内容会被封装在一个函数内v-slot的值就是其参数。
作为函数参数我们可以使用JavaScript的解构语法这会使得代码更简洁。
1.普通解构
template v-slot{text}p{{text}}/p
/template2.重命名prop
template v-slot{text:msg}p{{msg}}/p
/template3.指定后备内容
template v-slot{text{msg:Hello}}p{{text.msg}}/p
/template
