组件的介绍
全局组件
使用Vue.component进行全局注册，所有vue实例都会共享此组件
1 <div id="app">
2 {{msg}}
3 <const-comp></const-comp>
4
5 </div>
6 <script>
7
8 Vue.component('constComp', {
9 template: "<h3>我是全局组件</h3>"
10
11 });
12
13 new Vue({
14 el: "#app",
15 data: {
16 msg: "hello component"
17 }
18 });
19
20 </script> 局部组件
局部组件只能在引入当前的vue实例中有效，在当前vue实例中components属性加上引入进来的组件实例即可
<div id="app">
{{msg}}
<!-- <const-comp></const-comp> -->
<local-comp></local-comp>
</div>
<script>
/*Vue.component('constComp', {
template: "<h3>我是全局组件</h3>"
});*/
let localComp = {
template: "<div>我是局部组件</div>"
};
new Vue({
el: "#app",
data: {
msg: "hello component"
},
components: {
localComp
}
});
</script> 单文件组件(xxx.vue)
其实就是将写在js中的组件提出到一个vue文件中写而已，这样组件更加的好维护以及阅读性也会好，提取出来了相应的引入即可，不会显得文件很多行很长。
其主要有<template></template><script></script><style></style>这三个标签，每个标签做自己的事。template就像我们在html中写dom，script写js代码当前的组件实例，style写组件样式，注意：加上scoped即可使当前样式只在当前组件生效，组件渲染的时候此组件的dom会加上data-v-xxx属性来选择当前组件样式。如果没加上scoped的话当前组件的样式就会在引入这个组件的实例中造成影响
如我写的一个found.vue文件demo
View Code
组件的通信
vue组件的通信是vue组件的核心，组件不仅仅是要把模板的内容进行复用；更主要的是组件间要进行通信；组件之间的通信数据传递是组件的生命力之一。
props单向数据流，父组件向子组件传递数据
props可以是一个数据类型也可以是一个数组，也可以是对象，对象下的数据有3个属性type,default,require。其中default，require值都是布尔类型值。type有Number,String,Boolean,Array,Object,Function，Symbol。如果props数据是对象或数组时默认值default必须是一个函数来返回初始化数据。而且因为对象或数据是引用类型，指向的是同一个内存空间所以当props数据是这两个类型时，数据改变时子组件内改变是会影响父组件的。
props数据类型及相关样例
View Code
这里稍微改动一下局部组件的代码，父组件向子组件传递数据；
1 <div id="app">
2 {{msg}}
3 <!-- <const-comp></const-comp> -->
4 <local-comp :props-a="info"></local-comp>
5 </div>
6 <script>
7
8 /*Vue.component('constComp', {
9 template: "<h3>我是全局组件</h3>"
10
11 });*/
12 let localComp = {
13 template: "<div>我是局部组件<p>父组件传过来的数据为-->{{propsA}}</p></div>",
14 props: {
15 propsA: {
16 type: String,
17 default: "",
18 require: true
19 }
20 }
21 };
22 new Vue({
23 el: "#app",
24 data: {
25 msg: "hello component",
26 info: "hello props"
27 },
28 components: {
29 localComp
30 }
31 });
32
33 </script> 自定义事件$emit，子组件向父组件通信
这里还是在原来的基础上改，子组件使用$emit自定义一个send事件向父组件发送数据
1 <div id="app">
2 {{msg}}
3 <!-- <const-comp></const-comp> -->
4 <div>子组件数据为---->{{fromChildData}}</div>
5 <local-comp :props-a="info" @send="getChildData"></local-comp>
6 </div>
7 <script>
8
9 /*Vue.component('constComp', {
10 template: "<h3>我是全局组件</h3>"
11
12 });*/
13 let localComp = {
14 template: "<div>我是局部组件\
15 <p>父组件传过来的数据为-->{{propsA}}</p>\
16 <button @click='sendMsg'>使用$emit子组件向父组件传递事件</button>\
17 </div>",
18 props: {
19 propsA: {
20 type: String,
21 default: "",
22 require: true
23 }
24 },
25 data() {
26 return {
27 msg: "子组件数据"
28 }
29 },
30 methods: {
31 sendMsg(evt) {
32 this.$emit('send', this.msg);
33 }
34 }
35 };
36 new Vue({
37 el: "#app",
38 data: {
39 msg: "hello component",
40 info: "hello props",
41 fromChildData: ""
42 },
43 components: {
44 localComp
45 },
46 methods: {
47 getChildData(val) {
48 this.fromChildData = val
49 }
50 }
51 });
52
53 </script> 非子父组件通信，使用一个空的Vue实例作为一个事件总线监听数据变化
这种场景用于组件之间不为子父层级关系的时候相关通信，我们使用的那个空vue实例里也可以放vue的属性。用这个空的vue实例来$emit自定义一个事件然后再用这个实例来$on监听自定义事件，从而达到非子父组件之间的通信。（PS：这里暂时不讨论vuex），看demo代码。demo例子使用了ref组件索引。
<div id="app">
{{message}}
<component-a ref="a"></component-a>
<component-a ref="b"></component-a>
</div>
<script>
const bus = new Vue({});
Vue.component('component-a', {
data () {
return {
msg: 1
}
},
template: '<button @click="handleEvent">传递事件</button>',
methods: {
handleEvent () {
bus.$emit('on-message', '来自组件 com-a 的内容');
}
}
});
const app = new Vue({
el: '#app',
data: {
message: ''
},
mounted () {
bus.$on('on-message', (msg) => {
this.message = msg;
});
this.$children.msg = 2;
}
})
</script> slot组件内容分发
单个就默认slot，多个使用具名slot，$slots访问对应slot，vue2.0新增；因为vue2使用render函数来渲染，所以需要使用this.$slots来访问slot。this.$slots.xxx访问具体的slot，即slot中name指定的值 值类型{ [name: string]: ?Array<VNode> }
如果需要给slot添加默认内容的时候直接在slot上写就可以了，这个时候默认的slot内容所在的作用域就是其所在的组件实例，可以根据其所在的组件来控制slot默认的内容展示如:<slot>{{msg}}</slot>。如果没有指定默认数据的话slot内容根据其父组件所在的作用域。
当 vue 组件中当需要组件混合使用的时候需要用到内容分发，内容不确定的时候需要用到slot内容分发。
看demo代码；
1 <div id="app">
2 <com-out>
3 <div slot="b">{{msgB}}</div>
4 <div slot="a">{{msgA}}</div>
5
6 </com-out>
7 </div>
8 <template id="co">
9 <div>
10 hello
11 <slot name="a"></slot>
12 <slot name="b"></slot>
13 </div>
14 </template>
15 <script>
16 Vue.component('com-out', {
17 template: "#co",
18 mounted() {
19 console.log("com-out slot" + this.$slots.a[0]);
20 }
21 });
22 new Vue({
23 el: "#app",
24 data: {
25 msgA: '父组件数据a',
26 msgB: '父组件数据b'
27 }
28 })
29 </script> 递归组件
递归组件要记住两点：
1.递归组件必须要给组件设置name。
2.要在一个合适的时间(条件)跳出递归否则会报栈溢出异常。
1 <div id="app">
2 <com :count="1"></com>
3 </div>
4 <template id="cr">
5 <div><com :count="count + 1" v-if="count < 3"></com>{{count}}</div>
6 </template>
7 <script>
8 Vue.component('com', {
9 name: 'comr',
10 template: "#cr",
11 props: {
12 count: {
13 type: Number,
14 default: 1
15 }
16 }
17 })
18 new Vue({
19 el: '#app'
20 })
21
22
23 </script> 动态组件
vue动态组件其实就是在组件中使用:is属性根据值来判断显示哪个组件。
1 <div id="app">
2 <button @click="changeCom">点击让子组件显示</button>
3 <com v-bind:is="activeCom"></com>
4 </div>
5 <script>
6 new Vue({
7 el: '#app',
8 data: {
9 activeCom: "comA"
10 },
11 methods: {
12 changeCom: function () {
13 let arr = ["comA", "comB", "comC"], index;
14 index = Math.ceil(Math.random()*arr.length);
15 this.activeCom = arr[index];
16 }
17 },
18 components: {
19 comA: {
20 template: "<div>组件comA</div>"
21 },
22 comB: {
23 template: "<div>组件comB</div>"
24 },
25 comC: {
26 template: "<div>组件comC</div>"
27 },
28 }
29 });
30 </script> 异步组件
异步组件在性能上有一定的优势，不仅加快了渲染时间也减少了不必要的加载；在路由中经常用到
看demo；
<div id="app">
<child-component></child-component>
</div>
<script>
Vue.component('child-component', function (resolve, reject) {
window.setTimeout(function () {
resolve({
template: '<div>异步组件的内容</div>'
})
}, 2000)
});
new Vue({
el: '#app'
})
</script> 在路由中异步组件可以这样用：
1 {
2 path:"/路由地址",
3 name:"routeName",
4 component: resolve => require(["../components/xxx.vue"], resolve)
5 }