当子组件做循环，或者某一部分dom结构应该由外部传递进来的时候用作用域插槽。
作用域插槽必须是template开头且结尾
slot-scope以及对应的自定义名字(这里是myprops)来接收传递过来的数据：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<child>
<!-- 作用域插槽必须是template开头且结尾 -->
<template slot-scope="myprops">
<li>{{myprops.item}}</li>
</template>
</child>
</div>
<script type="text/javascript">
Vue.component("child", {
data: function() {
return {
list: [1, 2, 3, 4, 5, 6]
}
},
template: `<div>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
<ul>
//这种方式的作用是：显示什么，怎么显示不再是子组件决定了，而是父组件调子组件的时候给子组件传递模版:
<slot v-for="item of list" :item=item></slot>
</ul>
</div>`
});
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
