Vue 插槽

如果向组件标签中输入内容，会被忽略掉

1、props接受父组件传递过来的数据

2、插槽，接受父组件向子组件传递的html文本

在组件中通过slot标签可以接收父组件传递过来的html文本,就是将slot标签添加到template标签中

如下：现在组件中添加标签

        <sub-component :pmsg='msg'>
         <h3>sub-component之间的内容</h3>
        </sub-component>

再在template设置slot标签，以显示组件中添加的标签

    <template id="subComponent">
        <div>
            <h2>subComponent组件</h2>
            <p>subComponent组件数据{{username}}</p>
            <p>父组件传递过来的数据:{{pmsg}}</p>
            <slot></slot>
        </div>
        
    </template>

 

 vue插槽后备内容

后备内容

有时为一个插槽设置具体的后备（也就是默认的）内容是很有用的，

他只会在没有提供内容的时候被渲染

 具名插槽：

如果定义了多个插槽，想把指定内容放到指定插槽中，

默认情况下：

当使用组件时，组件定义的所有html文本都会放到插槽里面

因此，需要给插槽取一个名字。同时，在向具名插槽提供内容的时候，我们可以在一个template元素上是用

v-slot指令，并已v-slot的参数的形式提供其名称。

    <div id="app">
        <base-layout id="layout">
            <!-- 当使用组件时，组件定义的所有html文本都会放到插槽里面 
                  在向具名插槽提供内容的时候，我们可以在一个template元素上是用
                  v-slot指令，并已v-slot的参数的形式提供其名称
            -->
            <template v-slot:header>
                <h3 >我是要插入的头部内容</h3>
            </template>
            
            <template v-slot:main>
                <h3>我是要插入的主体内容</h3>
            </template>
            
            <template v-slot:footer>
                <h3>我是要插入的底部内容</h3>
            </template>
            
        </base-layout>
    </div>
    <!-- 定义一个组件，在组件内部定义多个插槽 -->
    <template id="baseLayout">
        <div>
            <header>
                <p>头部</p>
                <!-- slot内容的默认值是defalut -->
                <slot name="header"></slot>
            </header>
            <main>
                <p>主题</p>
                <slot></slot>
            </main>
            <footer>
                <p>底部</p>
                <slot name="footer"></slot>
            </footer>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('baseLayout', {
            template:'#baseLayout',
            data () {
                return {
                    username:'tom'
                }
            },
            props: ['pmsg']
        })
        let vm = new Vue({
            el : "#app",
            data : {
                msg:'hello vue'
            },
            components: {
                'btn-tpl' : {
                    template:'#btn-tpl'
                }
                
            }
        })
    </script>