详解vue slot插槽的使用方法
程序员文章站
2022-06-24 17:24:08
官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观
官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> </head> <body> <div id="app"> <div> <!-- 单slot --> <v-one> <!-- 这里的所有内容会替换掉slot --> <p>初始化段落一</p> <p>初始化段落二</p> </v-one> <!-- 渲染结果 --> <!-- <div> <h1>组件标题</h1> <p>初始化段落一</p> <p>初始化段落二</p> <p>组件段落内容</p> <p>i am one</p> </div> --> <!-- 具名slot --> <v-two> <p slot="nav">我是导航</p> <p slot="main">我是内容</p> <p slot="footer">我是底部</p> </v-two> <!-- 渲染结果 --> <!-- <div> <nav> <p>我是导航</p> </nav> <main> <p>我是内容</p> </main> <footer> <p>我是底部</p> </footer> </div> --> <!-- 作用域插槽 --> <v-three> <!-- 父组件默认无法使用子组件数据 --> <template scope="props"> <p>{{props.text}}</p> </template> </v-three> <!-- 渲染结果 --> <!-- <div><p>i am three</p></div> --> </div> </div> <template id="one"> <div> <h1>组件标题</h1> <slot></slot> <p>组件段落内容</p> <p>{{one}}</p> </div> </template> <!-- 具名slot --> <template id="two"> <div> <nav> <slot name="nav"></slot> </nav> <main> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <!-- 作用域插槽 --> <template id="three"> <div> <!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 --> <slot :text="three"></slot> </div> </template> <script> new vue({ el: '#app', components: { 'v-one': { template: '#one', data() { return { 'one': 'i am one' } } }, 'v-two': { template: '#two', data() { return { 'two': 'i am two' } } }, 'v-three': { template: '#three', data() { return { 'three': 'i am three' } } } } }); </script> </body> </html>
单个slot使用最简单,也是最常用的,当我们定义了一个子组件,父组件在使用的这个组件的时候,想在内部自定义一些初始化数据,这时候就可以用slot实现。
具名slot只是给slot加了name属性,在使用的时候可以引入多个。
作用域slot就比较强大了,我们知道子组件的数据,在父组件中是无法使用的,但是通过官方提供的扩展,可以轻松实现这一点。
渲染后效果图,可以直接自己在浏览器运行查看效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。