Vue slot插槽

最新推荐文章于 2023-12-16 20:12:58 发布

Wogna

最新推荐文章于 2023-12-16 20:12:58 发布

阅读量95

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44999951/article/details/125044678

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue slot插槽实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽</title>
</head>
<body>

<!--定义好盒子内容-->
<div id="slot">
<!--  指定插入位置slot="one"
      v-bind绑定props元素给props元素属性赋值
      再将已经有值的组件插入指定slot插槽
      （我认为slot就是一个占位符~）
 -->
<slott>
    <!--  slot绑定<slot>里边定义好的name值 指定要插入的位置 -->
    <one1 slot="one" v-bind:slot1="message"></one1>
    <two2 slot="two" v-for="item in Items" :slot2="item"></two2>
</slott>
</div>

<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>

<script>
    //定义插槽
    Vue.component("slott",{
        template: '<div>' +
            '<slot name="one"></slot>' +   //定义插槽 name属性为one
            '<ul>' +
            '<slot name="two"></slot>' +   //定义插槽 name属性为two
            '</ul>' +
            '</div>'
    });
    //定义第一个要插入的组件one1
    Vue.component("one1",{
        props:["slot1"],
        template: '<p>' +
            '{{slot1}}' +
            '</p>'
    });
    //定义第二个要插入的组件two2
    Vue.component("two2",{
        props:["slot2"],
        template: '<li>' +
            '{{slot2}}' +
            '</li>'
    })

    //定义Vue对象
    var vm = new Vue({
        el:"#slot",
        data:{
            message:"nihao",
            Items:['张三','李四','王五']
        }
    })
</script>
</body>
</html>

Wogna

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue slot插槽

Vue slot插槽实操<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot插槽</title></head><body><div id="slot"><!-- 指定插入位置slot="one" v-bind绑定pro
复制链接

扫一扫