一般情况下：
<head>
<meta charset="utf-8" />
<title>Vue中的作用域插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child></child>
</div>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
template: '<div><ul><li v-for="item of list">{{item}}</li></ul></div>',
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
一般情况
使用插槽：
<head>
<meta charset="utf-8" />
<title>Vue中的作用域插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<!--作用域插槽：template开头结尾，声明从子组件接受的数据放在那里（props）,模板的展示方式（li）；
使用场景：子组件循环或某部分dom结构由外部传递过来时候-->
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
//template: '<div><ul><li v-for="item of list">{{item}}</li></ul></div>',
template: '<div><ul><slot v-for="item of list" :item=item>{{item}}</slot></ul></div>'
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
作用域插槽
网友评论