- 作为Vue特殊属性的 slot 是用于标记往哪个具名插槽中插入子组件内容。slot-scope用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中,你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。此属性不支持动态绑定。
< body>< h1>slot</ h1>< div id= "app">< goods v-for= "abc in goods">< span slot= 'name'>{{abc.name}}</ span>< span slot= 'num'>{{abc.num}}</ span></ goods></ div>< template id= "demo">< div>< p>名称:< slot name= 'name'></ slot>数量:< slot name= 'num'></ slot></ p></ div></ template>< script>goods = {template: "#demo"}var vm = new Vue({el: "#app",data: {goods: [{name: 'pen',num: 10},{name: 'car',num: 1}]},components: {"goods": goods}
})</ script></ body> - 使用插槽分发内容:在使用组件时,我们常常要像这样组合它们
< app>< app-header></ app-header>< app-footer></ app-footer></ app>
- 使用插槽分发内容—编译作用域:在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译。假定模板为:
< child-component>{{ message }}</ child-component>
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法:<!-- 无效 -->< child-component v-show="someChildProperty"></ child-component>Vue. component( 'child-component', {// 有效,因为是在正确的作用域内template: '<div v-show="someChildProperty">Child</div>',data: function () {return {someChildProperty: true}}}) - 使用插槽分发内容—单个插槽:除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
假定 my-component 组件有如下模板:< h2>我是子组件的标题</ h2>< slot>只有在没有要分发的内容时才会显示。</ slot>父组件模板:
< div>< h1>我是父组件的标题</ h1>< my-component>< p>这是一些初始内容</ p>< p>这是更多的初始内容</ p></ my-component></ div>渲染结果为:
< div>< h1>我是父组件的标题</ h1>< div>< h2>我是子组件的标题</ h2>< p>这是一些初始内容</ p>< p>这是更多的初始内容</ p></ div></ div> - 使用插槽分发内容—具名插槽:<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
例如,假定我们有一个
app-layout
组件,它的模板为:< div class= "container">< header>< slot name= "header"></ slot></ header>< main>< slot></ slot></ main>< footer>< slot name= "footer"></ slot></ footer></ div>父组件模板:
< app-layout>< h1 slot= "header">这里可能是一个页面标题</ h1>
< p>主要内容的一个段落。</ p>< p>另一个主要段落。</ p>
< p slot= "footer">这里有一些联系信息</ p></ app-layout>渲染结果为:
< div class= "container">< header>< h1>这里可能是一个页面标题</ h1></ header>< main>< p>主要内容的一个段落。</ p>< p>另一个主要段落。</ p></ main>< footer>< p>这里有一些联系信息</ p></ footer></ div>在设计组合使用的组件时,内容分发 API 是非常有用的机制。
使用插槽分发内容—作用域插槽:作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:
< div class= "child">< slot text= "hello from child"></ slot></ div>< div class= "parent">< child>< template slot-scope= "props">< span>hello from parent</ span>< span>{{ props.text }}</ span></ template></ child></ div>< div class= "parent">< div class= "child">< span>hello from parent</ span>< span>hello from child</ span></ div></ div>< my-awesome-list :items="items"><!-- 作用域插槽也可以是具名的 -->< lislot= "item"slot-scope= "props"class= "my-fancy-item">{{ props.text }}</ li></ my-awesome-list>< ul>< slot name= "item"v-for="item in items":text="item.text"><!-- 这里写入备用内容 --></ slot></ ul>< child>< span slot-scope= "{ text }">{{ text }}</ span></ child>
Vue学习—slot
最新推荐文章于 2024-07-25 18:11:12 发布