vue中的slot标签

Slot分发内容

①概述：
简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

②默认情况下
父组件在子组件内套的内容，是不显示的。

例如代码：

<div id="app">  
    <children>  
        <span>12345</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({
       
        el: '#app',  
        components: {
       
            children: {
         //这个无返回值，不会继续派发  
                template: "<button>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    });  
</script> 

显示内容是一个button按钮，不包含span标签里面的内容；

③单个slot
简单来说，只使用这个标签的话，可以将父组件放在子组件的内容，放到想让他显示的地方。

<div id="app">  
    <children>  
        <span>12345</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
	 //使用slot标签，可以使父组件放在子组件的内容，放到它想显示的地方
     //浏览器显示效果：<button>12345为了明确作用范围，所以使用button标签</button>
     //即使父组件在子组件嵌套的标签有多个，当用了slot标签后，都会显示，相当于父组件放在子组件中的内容把<slot></slot>给替代了
    var vm = new Vue({
       
        el: '#app',  
        components: {
       
            children: {
         //这个无返回值，不会继续派发  
                template: "<button><slot></slot>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    }