在Vue中使用作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在Vue中使用插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 未使用插槽 -->
<!-- <child content="<p> King </p>"></child> -->
<body-content>
<!-- 据名插槽,slot关键字设置名称 -->
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
<script>
Vue.component("body-content", {
props:["content"],
// 未使用插槽
// template: `<div>
// <p>Hello</p>
// <div v-html="this.content"></div>
// </div>`
// 使用插槽, 插槽可设置默认值， 加name即据名插槽
template: `<div>
<slot name="header">default header value</slot>
<div class="content">content</div>
<slot name="footer">default footer value</slot>
</div>`
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
Vue的作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的作用域插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<!-- 作用域插槽，必须使用<template>, 同时必须声明从子组件接收的数据的放置位置，告诉子组件展示的模板信息-->
<!-- 当子组件进行循环，或者某一部分它的DOM由外部传进来的时候使用插槽 -->
<template slot-scope="props">
<li>{{props.item}} - item</li>
</template>
</child>
</div>
<script>
Vue.component("child", {
data: function() {
return {
list: [1, 2, 3, 4, 5]
}
},
template: `<div>
<ul>
<slot v-for="item of list" :item=item></slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
