vue 插槽的基本使用

  <div id="app">
        <cpn><button>case</button><p>zkjable</p></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>我是组件</p>
            <slot><button>default</button></slot>
        </div>
    </template>

/**

1.slot

2.默认值

3.单个slot,连续多个内容会全部显示

*/

<script>
        const app = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                btnclick(){
                    
                }
            },
            components:{
                cpn:{
                    template:'#cpn'
                }
                
            }
        })
</script>

猜你喜欢

转载自www.cnblogs.com/lfhphp/p/12305222.html