vue 插槽slot

最新推荐文章于 2023-08-14 17:29:08 发布

风雨等归期

最新推荐文章于 2023-08-14 17:29:08 发布

阅读量114

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/liangmaxmin/article/details/105136398

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

https://www.cnblogs.com/vickylinj/p/9578455.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的插槽</title>
        <script src="../js/vue.js"></script>
	</head>
	<body>
        <div id="root">
            <child>
                <p>Dell</p>
                <div slot="one">one</div>
                <div slot="two">two</div>
            </child>
        </div>
	</body>
    <script>
        Vue.component('child',{
            props:['content'],
            //具名插槽 .  指定插入的内容
            template:`<div><slot name="one"></slot><div>content</div><slot name="two"></slot></div>`
        })
        
        
        var vm = new Vue({
            el:'#root'
        })
    </script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="../js/vue.js"></script>
	</head>
	<body>
        <div id="root">
            <child>
                <!-- 固定写法 -->
                <template slot-scope="props">
                    <li>{{props.item}}---{{props.index}}</li>
                </template>
            </child>
        </div>
	</body>
    <script>
        Vue.component('child',{
            data(){
                return{
                    list:[1,2,3,4]
                }               
            },
            // 作用域插槽,用于传dom结构 和数据
            template:`<div>
                          <ul>
                            <slot v-for="(item,index) of list" :item=item :index=index></slot>
                          </ul>
                      </div>`
        })
        
        var vm = new Vue({
            el:'#root'
        })
    </script>
</html>

在这里插入图片描述

风雨等归期

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue中的插槽</title> <script src="../js/vue.js"></script> </head> <body&g...
复制链接

扫一扫