vue槽组件的组合/分发实例

　　

　　

<强>使用组件时常常会有组件组合使用的情况,如下:

　　 　　 　　& lt; componentA> 　　& lt; componentB> & lt;/componentB> 　　& lt; componentC> & lt;/componentC> 　　& lt;/componentA> 　　 　　

直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用槽来内容分发

　　

<强>插槽的使用方法如下:

　　 　　 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; app> 　　& lt; child> & lt;/child> 　　& lt; child2> & lt;/child2> 　　& lt;/app> 　　& lt;/div> 　　& lt;/body> 　　& lt; script> 　　Vue.component(“应用程序”,{ 　　模板:“\ 　　& lt; div> \ 　　& lt; slot>没有则显示这个& lt;/slot> \ 　　& lt; li> 111 & lt;/li> \ 　　& lt; li> 222 & lt;/li> \ 　　& lt; li> 333 & lt;/li> \ 　　& lt;/div> \ 　　＇， 　　}） 　　应用var=new Vue ({ 　　埃尔:“#应用”, 　　组件:{ 　　“孩子”:{ 　　模板:“& lt; div>你好word
” 　　}, 　　“child2”: { 　　模板:“& lt; div>你好vue js
” 　　} 　　 　　} 　　 　　}） 　　& lt;/script> 　　之前 　　 　　

vue槽组件的组合/分发实例

　　

& lt; app> & lt;/app>标签没有引入其他组件时显示为图1,有其他组件时显示为图2

　　

同时可以实测到可以引入多个并列的组件,组件会依次显示

　　

但是这只能解决单个组件的引入,实际应用中需要多个应用的组件会在多个位置,为了解决这个问题,就得确定槽位置的唯一性为了确定槽的vue中可以给槽添加行内名称来识别,

　　

同一父级下的槽添加行内名称必须保证唯一;

　　

子组件下的槽的名字是可以与父级组件的位置名称重复的,及每一级具有相对独立性。

　　

<强>代码效果图如下:

　　 　　 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; app> 　　& lt;孩子槽="单曲"比; 　　 　　& lt;/child> 　　 　　& lt; div槽=" slot2 "在如何使用槽# 63;& lt;/div> 　　 　　& lt;/app> 　　& lt;/div> 　　& lt;/body> 　　& lt; script> 　　Vue.component(“应用程序”,{ 　　模板:“\ 　　& lt; div> \ 　　& lt;槽的名字=暗デ钡脑诿挥性蛳允菊飧? lt;/slot> \ 　　& lt; li> 111 & lt;/li> \ 　　& lt; li> 222 & lt;/li> \ 　　& lt;槽name=" slot2祝辞没有则显示这个& lt;/slot> \ 　　& lt; li> 333 & lt;/li> \ 　　& lt;/div> \ 　　＇， 　　}） 　　应用var=new Vue ({ 　　埃尔:“#应用”, 　　组件:{ 　　“孩子”:{ 　　模板:“& lt; div>你好\ 　　& lt; li> 22222 & lt;/li> \ 　　& lt;/div> 　　}, 　　“child2”: { 　　模板:“& lt; div>你好vue js