第11章:组件详解
组件是Vue.js最推崇也最强大的功能之一，核心目标是可重用性。
我们把组件代码按照template、style、script的拆分方式，放置到对应的.vue文件中。
1.注册
Vue.js的组件注册分为全局注册和局部注册。
全局注册使用Vue.component方法。第一个参数是组件名字，第二个参数是组件的构造函数，要么是function，要么是object。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<didi-component></didi-component>
<en-component></en-component>
</div>
<script src="js/vue.js"></script>
<script>
//第二个参数传入object的情况
Vue.component("didi-component",{
template:"<div>A custom component!</div>"
});
//第二个参数传入function的情况，它是一个组件构造器
var ENcomponent=Vue.extend({
template:"<div>A 2rd components</div>"
});
//注册
Vue.component("en-component",ENcomponent);
//创建根实例
new Vue({
el:"#app"
})
</script>
</body>
</html>
显示效果
局部注册，以vue实例选项components或者组件构造器即Vue.extend函数的components选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<didi-component></didi-component>
</div>
<script src="js/vue.js"></script>
<script>
var Parent=Vue.extend({
template:"<p>这里是父组件的内容</p><br/><child></child>",
components:{
"child":{
template:"<div>我是子组件的内容</div>"
}
}
})
new Vue({
el:"#app",
components:{
"didi-component":Parent
}
})
</script>
</body>
</html>
显示效果
2.数据传递
组件作为一个app(项目)的组成部分，总是要涉及到组件通信。组件通信属于数据传递的范畴，数据传递一共有3种方式:
props、组件通信、slot。
(1)props属性
首先区别一下props和data和propsData。props作用于父子组件之间的数据传递，data组件或者vue实例化时经常使用，propsData用来在组件初始化后覆盖props中的属性。接下来是如何使用props属性。
第一种方式，字面量语法
直接在组件的html代码中传入普通的字符串，在组件内部使用props属性。注意:html不区分大小写，名字为camelCase的属性会转化为短横线隔开(kebab-case)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<hello-component msg="hello"></hello-component>
<vivian my-data="3.1415"></vivian>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("hello-component",{
props:["msg"],
template:"<span>{{msg}},front-end!</span>"
});
Vue.component("vivian",{
props:["myData"],
template:"<div>{{myData}}</div>",
replace:true
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
第二种，动态语法
下面的例子从父组件向子组件传递属性，每当父组件的数据变化时，该变化也会传导给子组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<vivi-props></vivi-props>
</div>
<script src="js/vue.js"></script>
<script>
var Child=Vue.extend({
props:["viviProps"],
//传给子组件的属性名称
template:"<div>{{viviProps}}</div>",
//既然在props属性上定义了，那么就可以在模板里使用了
replace:true
});
var Parent=Vue.extend({
template:"<p>我是父组件的内容</p><br/><child :vivi-props='hello'></child>",
data:function(){
return {"hello":"hello"}
},
//动态绑定的属性的值由父组件的data来定义
components:{
"child":Child
}
})
new Vue({
el:"#app",
components:{
"vivi-props":Parent
}
});
</script>
</body>
</html>
第三种方式，使用.sync和.once修饰符。
默认或者使用.once修饰符是父组件到子组件的单向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="info.name"/>
<child v-bind:msg.once="info"></child>
<!--把根实例的info数据属性传递给子组件child的msg属性-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
info:{
name:"顺风车"
}
},
components:{
"child":{
props:["msg"],
template:"<div>{{msg.name}}</div>"
}
}
})
</script>
</body>
</html>
.sync修饰符能做到双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
父组件：
<input v-model="val"><br/>
子组件：
<test :test.sync="val"></test>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template: "<input v-model='test'/>"
}
}
});
</script>
</body>
</html>
显示结果
第4种方式，prop验证。
我们把自己的组件给别人使用，那么要求使用者能够根据prop提供的对象正确使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
父组件：
<input v-model="val"><br/>
子组件：
<test :test="val"></test>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components:{
test:{
props: {
test: {
twoWay: true
}
//我们希望组件的使用者通过双向绑定来使用这个组件。
},
//把根实例的val属性传递给test属性。
template: "<input v-model='test'/>"
}
}
});
</script>
</body>
</html>
我们看到这个代码 <test :test="val"></test> 会抛出错误如下:
那么正确的使用应该是如下，加上.sync修饰词，以满足twoWay:true的要求。
第5种方式，prop转换函数，coerce函数。可以理解为prop属性值的过滤器。
(2)组件通信
尽管this.$parent和this.$children(属性)可以访问父/子组件的数据，根实例的后代可以通过this.$root访问根实例，但这种方式应该尽量避免。
首先，因为父子组件紧密的耦合，只看父组件却很难理解父组件的状态，因为它能被任意的修改。再次，子组件要使用父组件的数据，应当避免直接依赖，尽量显式的使用props属性。
我们的方案是通过作用域传递事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
<!--子组件绑定了notify函数-->
</template>
<div id="events-example">
<p>Message:{{messages|json}}</p>
<child></child>
</div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("child",{
template:"#child-template",
data:function(){
return {msg:"hello"}
},
methods:{
notify:function(){
if(this.msg.trim()){
this.$dispatch("child-msg",this.msg);
this.msg="";
}
//notify函数的功能是把msg属性的值dispatch到child-msg事件上，它会沿着父作用域的链冒泡
}
}
});
var parent=new Vue({
el:"#events-example",
data:{
messages:[]
},
events:{
"child-msg":function(msg){
this.messages.push(msg);
}
//接收到child-msg事件后，那么执行push方法
}
})
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>
接下来是在子组件v-on监听，更加简洁的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
<!--子组件绑定了notify函数-->
</template>
<div id="events-example">
<p>Message:{{messages|json}}</p>
<child v-on:child-msg="handleIt"></child>
</div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("child",{
template:"#child-template",
data:function(){
return {msg:"hello"}
},
methods:{
notify:function(){
if(this.msg.trim()){
this.$dispatch("child-msg",this.msg);
this.msg=""; //notify函数的功能是把msg属性的值dispatch，触发child-msg事件，它会沿着父作用域的链冒泡
}
}
});
var parent=new Vue({
el:"#events-example",
data:{
messages:[]
},
//改动后的代码
methods:{
handleIt:function(msg){
this.messages.push(msg);
}
}
})
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>
有时js中直接访问子组件，可用v-ref为子组件指定一个索引ID。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div id="events-example">
<p>Message:{{messages|json}}</p>
<button @click="handleIt">打印msg字符串儿</button>
<!--点击按钮，那么执行handleIt方法-->
<child v-ref:id1></child>
</div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("child",{
template:"<div>{{msg}}</div>",
data:function(){
return {msg:"hello"}
}
});
var parent=new Vue({
el:"#events-example",
data:{
messages:[]
},
//改动后的代码
methods:{
handleIt:function(){
console.log(this.$refs.id1.msg);
//那么就可以直接通过id名访问到子组件的属性了
}
}
})
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html> </body>
</html>
(3)slot分发内容
组合组件时，内容分发API是非常有用的机制。
<vivi>
<vivi-header></vivi-header>
<vivi-footer></vivi-footer>
</vivi>
首先，明确分发内容的作用域。
<child v-on:child-msg="handleIt">{{msg}}</child>
msg绑定到父组件的数据还是子组件的数据里？答案是父组件。因为父组件模板的内容在父组件的作用域里编译，子组件模板的内容在子组件的作用域里编译。
所以对于分发内容(接下来就知道什么是分发内容了)， 在父组件内容里编译。
接下来看，单个slot。
当子组件模板里只有一个没有任何修饰的Slot，那么父组件的整个内容将插入到slot的挂载点并替换掉它。
单个slot的DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="viviTemplate">
<div>
<h1>这里是vivi组件的内容</h1>
<slot>
如果没有分发内容，则显示我
</slot>
<!--回退内容,当宿主元素为空没有内容插入时-->
</div>
</template>
<div id="app">
<vivi-component>
<p>这里是原始内容</p>
<p>这里是更多的原始内容</p>
<!--很明显，这里的p标签的作用域并不是vivi-component的内容，而是它的父组件的内容-->
</vivi-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("vivi-component",{
template:"#viviTemplate",
})
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html> </body>
</html>
显示效果:
接下来看，命名的slot的用法。
<slot>元素可使用name配置如何分发内容。仍然可以有一个匿名的slot，作为找不到匹配内容片段的回退容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="multiTemplate">
<div>
<slot name="one"></slot>
<slot></slot>
<slot name="two"></slot>
</div>
</template>
<div id="app">
<multi-insertion> <p slot="one">One</p>
<!--对应name值为one的被分发内容-->
<p slot="two">Two</p>
<!--对应name值为two的被分发的内容-->
<p>Default A</p>
<p slot="three"></p>
<!--对应默认的被分发的内容--> </multi-insertion>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("multi-insertion",{
template:"#multiTemplate",
})
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html> </body>
</html>
显示结果:
最后分析一下，源码。
SLOT的源码如下:
var slot = {
priority: SLOT,//优先级
params: ['name'],//
//bind方法的功能是绑定指令
bind: function bind() {
var name = this.params.name || 'default';
var content = this.vm._slotContents && this.vm._slotContents[name];
if (!content || !content.hasChildNodes()) {
this.fallback();
} else {
this.compile(content.cloneNode(true), this.vm._context, this.vm);
}
},
compile: function compile(content, context, host) {
//
if (content && context) {
if (this.el.hasChildNodes() && content.childNodes.length === 1 && content.childNodes[0].nodeType === 1 &&
//对v-if指令的处理，略。
content.childNodes[0].hasAttribute('v-if')) {
var elseBlock = document.createElement('template');
elseBlock.setAttribute('v-else', '');
elseBlock.innerHTML = this.el.innerHTML;
elseBlock._context = this.vm;
content.appendChild(elseBlock);
}
var scope = host ? host._scope : this._scope;
this.unlink = context.$compile(content, host, scope, this._frag);
}
if (content) {
replace(this.el, content);
} else {
remove(this.el);
}
//
},
fallback: function fallback() {
this.compile(extractContent(this.el, true), this.vm);
//把元素的内容抽出来，然后编译
},
unbind: function unbind() {
if (this.unlink) {
this.unlink();
}
//
}
};
先来看bind方法。这里的this指的是<slot>指令，通过name获取到分发的内容，比如 <p slot="one">One</p> 。有分发的内容，那么就添加到slot指令挂载的元素。没有就把slot指令所在元素删除掉。
3.混合
使用混合对象(把选项分离出来，然后组合进组件的选项中)。好处是方便分布复用功能。
第一，简单的混合例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<vivi-component></vivi-component>
</div>
<script src="js/vue.js"></script>
<script>
var myMixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log("hello from mixin!");
}
}
};
//myMixin要放在使用之前定义哦。顺序问题很重要。
new Vue({
el:"#app",
components:{
"vivi-component":{
template:"<h1>hello ,vivian!</h1>",
mixins:[myMixin]
}
}
}) </script>
</body>.
</html>
第二，当混合对象与组件有同名选项时，以适当的策略合并。同名钩子函数被并入一个数组中，因而都会被调用。而且顺序是，混合的钩子函数比组件的钩子函数更早被调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>混合对象</title>
</head>
<body>
<div id="app">
<vivi-component></vivi-component>
</div>
<script src="js/vue.js"></script>
<script>
var myMixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log("hello from mixin!");
}
}
};
new Vue({
el:"#app",
components:{
"vivi-component":{
template:"<h1>hello ,vivian!</h1>", created:function(){
console.log("组件内容被调用");
},
mixins:[myMixin]
}
}
}) </script>
</body>.
</html>
显示两个钩子函数都有被调用哦.
第三，methods、components、directives都是对象选项，合并时如果键冲突，那么组件的选项优先。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="js/vue.js"></script>
<script>
var myMixin={
methods:{
foo:function(){
console.log("foo");
},
conflicting:function(){
console.log("from mixin");
}
} };
var component=Vue.extend({
mixins:[myMixin],
template:"<h1>hello,vivi</h1>",
methods:{
bar:function(){
console.log("bar");
},
conflicting:function(){
console.log("来自组件本身");
}
}
});
var vm=new component();
vm.foo();//因为混合才有foo方法，所以打印foo
vm.bar();//因为只有组件才有bar方法，所以打印bar
vm.conflicting();//因为这个方法混合对象和组件都有，根据组件优先的原则，所以打印“来自组件本身”。 </script>
</body>.
</html>
调用的打印结果如下
第四，混合全局注册要慎用。会影响之后创建的所有vue实例。大多数情况下，只用于自定义选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="js/vue.js"></script>
<script>
Vue.mixin({
created:function(){
var myOption=this.$options.myOption;
if(myOption){
console.log(myOption);
}
}
}
);
var component=Vue.extend({
template:"<h1>hello,vivi!</h1>"
});
new Vue({
el:"#app",
components:{
"my-component":component
},
myOption:"hello"
})
</script>
</body>
</html>
4.动态组件
多个组件可以使用同一个挂载点，然后动态的在它们之间切换。
第一，动态组件的简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="dev" v-model="currentView"/>
<label for="one">开发</label>
<br/>
<input type="radio" id="two" value="painting" v-model="currentView"/>
<label for="two">画画</label>
<br/>
<input type="radio" id="three" value="travel" v-model="currentView"/>
<label for="three">旅游</label>
<br/>
<template id="dev">
<div>开发</div>
</template>
<template id="painting">
<div>画画</div>
</template>
<template id="travel">
<div>旅游</div>
</template>
<component :is="currentView">
<!--组件在vm.currentView变化时改变-->
</component>
</div>
<script src="js/vue.js"></script>
<script>
var dev=Vue.extend({
template:"#dev",
replace:"true"
});
var painting=Vue.extend({
template:"#painting",
replace:"true"
});
var travel=Vue.extend({
template:"#travel",
replace:true
});
var vm=new Vue({
el:"#app",
data:{
currentView:"dev"
},
components:{
dev:dev,
painting:painting,
travel:travel
}
})
</script>
</body>
</html>
显示效果
第二，
keep-alive特性会让组件重复创建时通过缓存来获取，从而快速创建，当然是提高了视图的性能。
使用的语法如下:
<component :is="currentView" keep-alive>
<!--组件在vm.currentView变化时改变-->
</component>
从源码中可以窥得一二:
第三，activate钩子函数。
它是组件切入前执行。可用来控制组件切换的时长。activate钩子只作用于动态组件切换或者静态组件初始化渲染的过程。不用于使用实例方法手动插入的过程。
完整的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="dev" v-model="currentView"/>
<label for="one">开发</label>
<br/>
<input type="radio" id="two" value="painting" v-model="currentView"/>
<label for="two">画画</label>
<br/>
<input type="radio" id="three" value="travel" v-model="currentView"/>
<label for="three">旅游</label>
<br/>
<template id="dev">
<div>开发</div>
</template>
<template id="painting">
<div>画画</div>
</template>
<template id="travel">
<div>旅游</div>
</template>
<component :is="currentView" transition="fade" transition-mode="out-in">
<!--改变的代码，先淡出再淡入-->
</component>
</div>
<style>
.fade-transition{
transition:opacity .3s ease;
}
.fade-enter,.fade-leave{
opacity:0;
}
</style>
<script src="js/vue.js"></script>
<script>
var dev=Vue.extend({
template:"#dev",
replace:"true",
activate:function(done){
var self=this;
console.log("在组件替换前打印"); setTimeout(function(){
console.log("计时器中的代码");
done();
},5000);
//延时5秒
}
});
var painting=Vue.extend({
template:"#painting",
replace:"true"
});
var travel=Vue.extend({
template:"#travel",
replace:true
});
var vm=new Vue({
el:"#app",
data:{
currentView:"dev"
},
components:{
dev:dev,
painting:painting,
travel:travel
}
})
</script>
</body>
</html>
可以看到在组件被插入前，它会执行activate函数，做了延时5秒的操作。
第四，transition-mode特性。用于指定两个动态组件之间如何过渡。
代码如下:
<component :is="currentView" transition="fade" transition-mode="out-in">
<!--改变的代码，先淡出再淡入-->
</component>
<style>
.fade-transition{
transition:opacity .3s ease;
}
.fade-enter,.fade-leave{
opacity:0;
}
</style>
完整的有渐进效果的DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="dev" v-model="currentView"/>
<label for="one">开发</label>
<br/>
<input type="radio" id="two" value="painting" v-model="currentView"/>
<label for="two">画画</label>
<br/>
<input type="radio" id="three" value="travel" v-model="currentView"/>
<label for="three">旅游</label>
<br/>
<template id="dev">
<div>开发</div>
</template>
<template id="painting">
<div>画画</div>
</template>
<template id="travel">
<div>旅游</div>
</template>
<component :is="currentView" transition="fade" transition-mode="out-in">
<!--改变的代码，先淡出再淡入-->
</component>
</div>
<style>
.fade-transition{
transition:opacity .3s ease;
}
.fade-enter,.fade-leave{
opacity:0;
}
</style>
<script src="js/vue.js"></script>
<script>
var dev=Vue.extend({
template:"#dev",
replace:"true"
});
var painting=Vue.extend({
template:"#painting",
replace:"true"
});
var travel=Vue.extend({
template:"#travel",
replace:true
});
var vm=new Vue({
el:"#app",
data:{
currentView:"dev"
},
components:{
dev:dev,
painting:painting,
travel:travel
}
})
</script>
</body>
</html>
5.生命周期
在vue.js中，实例化vue之前，它们以HTML的文本形式保存在文本编辑器中。当实例化后将经历，创建、编译、销毁3个主要阶段。
生命周期钩子:
(1)init:
在实例开始初始化时同步调用，此时数据观测、事件和watcher都尚未初始化。
(2)created:
在实例创建之后同步调用，此时实例已经结束解析选项，也就是数据绑定、计算属性、方法、watcher/事件回调已经建立。但是还没有开始DOM编译，$el还不存在。
(3)beforeCompile:
在编译开始前调用。
(4)compiled:
编译结束后调用，此时所有的指令已生效，因而数据的变化将触发DOM更新。但是不担保$el已插入文档。
(5)ready:
在编译结束和$el第一次插入文档之后调用，注意必须有vue插入(比如vm.$appendTo())才能触发ready钩子的。
(6)attached:
vm.$el插入DOM时调用。必须是由指令或者实例方法(比如$appendTo())插入，直接操作$vm.el不会触发钩子。
(7)detached
在vm.$el从DOM中删除时调用。必须是由指令或者实例方法删除，直接操作vm.$el不会触发这个钩子。
(8)beforeDestory:
在开始销毁实例时调用，此时实例仍然有功能。
(9)destroyed:
在实例销毁之后调用。
6.开发组件
使用.vue文件实现组件化。具体的代码执行请参看vue.js工具篇的webpack。
<template>
<div class="header">
<h1> {{ title }} </h1>
</div>
</template> <script>
export default {
data: function () {
return {
title: '我是頭部'
}
}
}
</script> <style>
.header {
color: red;
}
</style>