Vue.js,学习心得(十三)组件三
2017-11-08 本文已影响18人
战神飘雪
学习心得,
组件(三),
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件三使用插槽分发内容</title>
<style>
.pgone{
color:red;
}
.pgtwo{
color:yellow;
}
.pgthree{
color:green;
}
.default{
colr:black;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<!--使用插槽分发内容-->
<!--在使用组件时，我们常常要像这样组合它们：-->
<!--<app>-->
<!--<app-header></app-header>-->
<!--<app-footer></app-footer>-->
<!--</app>-->
<!--注意两点：-->
<!--<app> 组件不知道它会收到什么内容。这是由使用 <app> 的父组件决定的。-->
<!--<app> 组件很可能有它自己的模板。-->
<!--为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。-->
<!--这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。-->
<!--Vue.js 实现了一个内容分发 API，参照了当前 Web Components 规范草案，-->
<!--使用特殊的 <slot> 元素作为原始内容的插槽。-->
<!--编译作用域-->
<!--在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：-->
<div id="app-1">
<child-component>{{message}}</child-component>
</div>
<hr>
<!--message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：-->
<!--父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。-->
<script>
Vue.component('child-component', {
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
});
// 类似地，被分发的内容会在父作用域内编译。
var app1 = new Vue({
el: '#app-1',
data: {
message: ''
}
});
</script>
<!--单个插槽-->
<!--除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。-->
<!--当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。-->
<!--最初在 <slot> 标签中的任何内容都被视为备用内容。-->
<!--备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。-->
<div id="app-2">
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
<hr>
<script>
Vue.component('my-component', {
template: '<div>' +
'<h2>我是子组件的标题</h2>' +
'<slot>只有在没有要分发的内容是才会显示.</slot>' +
'</div>'
});
var app2 = new Vue({
el: '#app-2',
data: {}
})
</script>
<!--具名插槽-->
<!--<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。-->
<!--多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。-->
<!--仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。-->
<!--如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。-->
<hr>
<div id="app-3">
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
</div>
<hr>
<script>
Vue.component('app-layout', {
template: '<div class="container">' +
' <header>' +
' <slot name="header"></slot>' +
' </header>' +
' <main>' +
' <slot></slot>' +
' </main>' +
' <footer>' +
' <slot name="footer"></slot>' +
' </footer>' +
'</div>'
});
var app3 = new Vue({
el: '#app-3',
data: {}
})
</script>
<!--作用域插槽-->
<!--作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。-->
<!--在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：-->
<!--<div class="child">-->
<!--<slot text="hello from child"></slot>-->
<!--</div>-->
<!--在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。-->
<!--slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：-->
<div class="parent">
<child>
<template slot-scope="props">
<span>hello from parent</span>
<p>{{props.text}}</p>
</template>
</child>
</div>
<hr>
<script>
Vue.component('child', {
template: '<div class="child">' +
'<slot text="hello from child"></slot>' +
'</div>'
});
var app4 = new Vue({
el: '.parent',
data: {}
});
</script>
<!--在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。-->
<!--作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：-->
<div id="app-5">
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li
slot="item"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</my-awesome-list>
</div>
<!--解构-->
<!--slot-scope 的值实际上是一个可以出现在函数签名参数位置的合法的 JavaScript 表达式。-->
<!--这意味着在受支持的环境 (单文件组件或现代浏览器) 中，您还可以在表达式中使用 ES2015 解构：-->
<!--<child>-->
<!--<span slot-scope="{ text }">{{ text }}</span>-->
<!--</child>-->
<hr>
<script>
Vue.component('my-awesome-list', {
template: '<ul>' +
'<slot name="item" v-for="item in items" v-bind:text="item.text">' +
'<!--这里写备用内容-->' +
'</slot>' +
'</ul>',
data: function () {
return {
items: [
{text: "名字1"},
{text: "名字2"},
{text: "名字3"},
{text: "名字4"},
{text: "名字5"}
]
}
}
});
var app5 = new Vue({
el: '#app-5',
data: {
items:{
}
}
});
</script>
<!--动态组件-->
<!--通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，-->
<!--我们让多个组件可以使用同一个挂载点，并动态切换：-->
<!--keep-alive-->
<!--如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：-->
<!--<keep-alive>-->
<!--<component :is="currentView">-->
<!--<!– 非活动组件将被缓存！ –>-->
<!--</component>-->
<!--</keep-alive>-->
<div id="app-6">
<keep-alive>
<component v-bind:is="currentView" v-bind:class="classes">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>
</keep-alive>
<button v-on:click="lckme">{{msg}}</button>
</div>
<hr>
<script>
// Vue.component('component',{
//
// });
var lckmeNum
var app6 = new Vue({
el:'#app-6',
data:{
currentView:'default',
msg:'点我依次切换',
lckmeNum:0,
classes:'default'
},
components:{
default:{
template:'<p>点我有惊喜</p>'
},
waitDefault:{
template:'<p>点击重置</p>'
},
home:{
template: '<p>Welcome home!</p>'
},
posts:{
template: '<p>Welcome posts!</p>'
},
archive:{
template: '<p>Welcome archive!</p>'
}
},
methods:{
lckme:function () {
switch (this.lckmeNum){
case 0 :
this.currentView = 'home';
this.lckmeNum++;
this.classes = 'pgone';
break;
case 1 :
this.currentView = 'posts';
this.lckmeNum++;
this.classes = 'pgtwo';
break;
case 2 :
this.currentView = 'archive';
this.lckmeNum++;
this.classes = 'pgthree';
break;
default :
this.currentView = 'waitDefault';
this.lckmeNum = 0;
this.classes = 'default';
}
}
}
})
// var Home = {
// template: '<p>Welcome home!</p>'
// }
// var app6 = new Vue({
// el: '#app-6',
// data: {
// currentView: Home
// }
// })
</script>
</body>
</html>
