vue中slot组件的用法

2023-11-09 02:50•java•阅读 3000

slot实现按钮复用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    
<div >
    <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>

上一篇 »vue2.0修饰符sync用法
下一篇 »vue实现组件数据双向绑定