vue 插槽的定义

最新推荐文章于 2025-02-25 11:52:16 发布

@huihui_new

最新推荐文章于 2025-02-25 11:52:16 发布

阅读量367

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_52544128/article/details/114088641

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 20</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //slot 插槽
    //父模版里调用的数据属性，使用的都是父模版里的数据
    //子模版里调用的数据属性，使用的都是父模版里的数据
    //slot默认值设定
    //具名插槽的定义
    const app = Vue.createApp({
        data() {
            return {
                text:'提交'
            }
        },
        template:`
            <myform>
                <div>{{text}}</div>
            </myform>
            <myform>
                <button>{{text}}</button>
            </myform>
            <myform>
            </myform>
            <layout>
              <template v-slot:header>
                <div>header</div>
              </template>
              <template v-slot:footer>
                <div>footer</div>
              </template>
            </layout>
        `
    });
    app.component('layout',{
        //具名插槽
        template:`
            <div>
                <slot name="header"></slot>
                <div>content</div>
                <slot name="footer"></slot>
            </div>
        `
    });
    app.component('myform',{
        methods:{
            handleClick() {
                alert('123')
            }
        },
        //普通插槽，绑定事件
        template:`
            <div>
                <input />
                <span @click="handleClick">
                  <slot>defalt value</slot>
                </span>
            </div>
        `
    });
    app.mount('#root');
</script>
</html>