vue中slot组件的用法

slot实现按钮复用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    
<div id='app'>
    <Vheader2></Vheader2>
</div>

</body>

<script type="text/javascript" src="../vue02/js/vue.js"></script>

<script type="text/javascript">



    // 组件的创建
    Vue.component('Vbtn', {
        // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text1: "快乐style"
                };
        },

        template: `
            <button>
                <slot></slot>
            </button>
            `
    });

    // 组件的创建(声子))
    // 子组件2，被子组件使用
    let Vheader2 = {
        // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text2: "我是Vheader的子组件"
                };
        },

        template: `
            <div>
                <Vbtn>登录</Vbtn>
                <Vbtn>注册</Vbtn>
            </div>
            `
    };
    
    // 创建vue对象
    var app = new Vue({
        el: "#app",
        data: {},
        components: {
            Vheader2
        }
        
    })

</script>

</html>

 

posted @ 2019-10-09 13:29  WiseAdministrator  阅读(336)  评论(0)  编辑  收藏  举报