7.4使用slot分发内容
2019-03-03 本文已影响0人
咸鱼前端
7.4.2作用域
- 父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译
- 如果想数据在子组件上绑定，那应该是:
<script>
Vue.component("child-component", {
template: `<div v-show="showChild">子组件</div>`,
data () {
return {
showChild: true
}
}
});
</script>
7.4.3slot用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.4slot用法</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<child></child>
<br>
<br>
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多的正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
<br>
<br>
<my-list :books="books">
<template scope="props" slot="book"><!-- 先写好 "props" 用来传递数据,之后是具名slot -->
<li>{{ props.bookName }}</li><!-- 将书名渲染出来 -->
</template>
</my-list>
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
/*1.单个slot的用法*/
Vue.component("child", {
template: '\
<div>\
<slot>\
<p>如果父组件没有插入内容，我将作为默认出现</p>\
</slot>\
</div>\
',
//如果HTML模板中的 <child> 标签内没有内容，"template" 中的 <p> 元素内的 "如果父组件没有插入内容..." ，渲染出来的结果就是 <div> <p>如果父组件没有插入内容...</p> </div>
});
/*2.具名slot*/
Vue.component("child-component", {
template: `\
<div class="container">\
<div class="header">\
<slot name='header'></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name='footer'></slot>\
</div>\
</div>\
`
});
//<div className="main"> 内的 <slot> 内有使用 name 特性，将作为默认slot出现，父组件没有slot特性的元素与内容都将会在这里出现
//父组件使用了slot name特性的，在 template 中使用 <solt name="header"></slot> 使用
/*3.作用域插槽*/
Vue.component("my-list", {
props: {
books: {
type: Array,
default: function () {
return [];
}
}
},
template: `\
<ul>\
<slot name="book" v-for="book in books" :book-name="book.name"></slot>\
</ul>\
`//利用slot "name" 特性，指定名称元素，"v-for" 渲染 "books"，"book-name" 动态绑定上每一条数据的 "name"
})
var vm = new Vue({
el: "#app",
data: {
books: [
{ name: "《Vue.js实战》" },
{ name: "《JavsScript语言精粹》" },
{ name: "《JavaScript》高级程序设计" }]
}
})
</script>
</body>
</html>
