详解vue slot插槽的使用方法

2019-11-19 16:20:36

字体：大中小

来源：转载

供稿：网友

官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观

<!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就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。

渲染后效果图，可以直接自己在浏览器运行查看效果