Vue中的slot使用插槽分发内容的方法

2019-11-19 14:15:37

字体：大中小

来源：转载

供稿：网友

本文题材来自：https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

<slot></slot>标签，简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。

也有人说：props可以将数据从父组件传入子组件，slot可以将html从父组件传入子组件。那么如何实现呢？

单个插槽：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <script type="text/javascript" src="vue.min.js"></script>  </head>  <body>    <div id="app">      <h1>我是父组件的标题</h1>      <my-component>        <p>这是一些初始内容</p>        <p>这是更多的初始内容</p>      </my-component>    </div>    <script type="text/javascript">      Vue.component('my-component', {       // 有效，因为是在正确的作用域内       template: '<div>/              <h2>我是子组件的标题</h2>/              <slot>只有在没有要分发的内容时才会显示。</slot>/            </div>',       data: function () {        return {                 }       }      });      new Vue({        el:'#app',        data:{          msg:'你好啊'        }      })    </script>  </body></html>

组件中的模板中写入slot标签，在父级调用子组件的时候传入html即可。

具名插槽：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <script type="text/javascript" src="vue.min.js"></script>  </head>  <body>    <div id="app">      <my-component>         <h1 slot="header">这里可能是一个页面标题</h1>         <p>主要内容的一个段落。</p>         <p>另一个主要段落。</p>         <p slot="footer">这里有一些联系信息</p>      </my-component>    </div>    <script type="text/javascript">      Vue.component('my-component', {       // 有效，因为是在正确的作用域内       template: '<div class="container">/             <header>/              <slot name="header"></slot>/             </header>/              <main>/              <slot></slot>/             </main>/             <footer>/              <slot name="footer"></slot>/             </footer>/            </div>',       data: function () {        return {                 }       }      });      new Vue({        el:'#app',        data:{          msg:'你好啊'        }      })    </script>  </body></html>

具名插槽，顾名思义当有多个slot标签时，你需要给他们起个自己的名字，在父组件调用时需要slot="内部的对应名字"，当存在没有命名的slot标签时，父级组件传入的默认html代码将全部输出在无名的slot标签中。

作用域插槽

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <script type="text/javascript" src="vue.min.js"></script>  </head>  <body>    <div id="app">       <!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->       <child>        <template scope="props">         <span>hello from parent</span><br>         <span>{{ props.text }}</span>        </template>      </child>    </div>    <script type="text/javascript">      // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：      Vue.component('child',{        template:'<ul>' +              '<slot text="hello from child"></slot>' +             '</ul>',        data:function(){         return {         }        },      });      new Vue({        el:'#app',        data:{          msg:'你好啊'        }      })    </script>  </body></html>

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

其实就是相当于，在父组件中可以获取到子组件传递出来的props对象，从而渲染到父组件上。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue.js 获取select中的value实例

下一篇：在vue中封装可复用的组件方法