Vue 插槽

标签：slot Vue 插槽 内容 template 标签 组件

如果向组件标签中输入内容，会被忽略掉 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>

 

 

标签：slot,Vue,插槽,内容,template,标签,组件
From： https://www.cnblogs.com/yansunda/p/18372402