优先级：局部组件大于全局组件
重点： 所有组件都继承了vue的原型
1.局部组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div id="app">
<cpm :key="index" v-for="(item,index) in id" :id="index"></cpm>
</div>
<script>
const cpmc = Vue.extend({
props: ["id"],
data: function () {
return {};
},
template: `
<div>
<h2>这个是组件{{id+1}}号</h2>
<p>红红火火恍恍惚惚</p>
</div>
`,
}
);
let vue = new Vue({
el: "#app",
data: {
message: 1,
id: [{ id: 0 }, { id: 1 }, { id: 3 }, { id: 4 }, { id: 5 }],
},
methods: {},
components: {
'cpm': cpmc,
},
});
</script>
|
2.全局组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div id="app">
<comp></comp>
</div>
<script src="../../js/vue.js"></script>
<script>
Vue.component('comp',{
data: function(){
return {
items: [1,2,3,4,5],
}
},
template: `
<div>
<h2 :key="index" v-for="(item,index) in items">{{index+1}}</h2>
</div>
`
})
const app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
|
3.组件模板的分离
1.使用script的方式引入，type选择text/x-template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="app">
<cpn></cpn>
</div>
<script type="text/x-template" id="cpn">
<h2>这个是写在script里面的模板</h2>
</script>
<script src="../../js/vue.js"></script>
<script>
Vue.component("cpn", {
template: "#cpn",
});
const app = new Vue({
el: "#app",
data: {
message: "",
},
});
</script>
|
2.使用template的方式引入，注意id为组件注册的id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<h2>这个是写在template标签里面的模板</h2>
</template>
<script src="../../js/vue.js"></script>
<script>
Vue.component("cpn", {
template: "#cpn",
});
const app = new Vue({
el: "#app",
data: {
message: "",
},
});
</script>
|
4.参数使用问题
在组件中，参数data对应的是一个函数，数据存放在函数return的对象中。
1
2
3
| data: function () {
return {
},
|
5.相同组件多次引用，之间数据不互通
6.父子传参
1.数组类型
1
| props: ['parm1','parm2']
|
2.对象类型
1
2
3
4
5
6
7
| props: {
'parm1': Array,
'parm2': {
type: String,
default: 'default_num'
}
}
|
3.驼峰命名注意点
参数如果是用驼峰命名法的话，注意在使用的时候要使用’-‘连接两个单词
1
2
3
| <cpm :c-name="parm1" :c-movies="parm2">
props: ['cName','cMovies']
|
7.子父传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<template id="tags">
<div>
<button :key="item.id" v-for="item in tags_list" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<div id="app">
<tags @item-click="cpmClick"></tags>
</div>
<script src="../../js/vue.js"></script>
<script>
Vue.component("tags", {
template: "#tags",
data: function () {
return {
tags_list: [
{ id: "aaa", name: "热门推荐" },
{ id: "bbb", name: "男生上衣" },
{ id: "ccc", name: "男生裤子" },
{ id: "ddd", name: "女生上衣" },
{ id: "eee", name: "女生裤子" },
],
};
},
methods: {
btnClick: function(item){
this.$emit('item-click',item);
}
}
});
const app = new Vue({
el: "#app",
data: {
message: "",
},
methods: {
cpmClick: function(item){
console.log('触发了父组件的点击事件,收到了'+item.name+'按钮传来的参数');
}
}
});
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
| @click="btnClick(item)"
btnClick: function(item){
// 将参数传递给父组件
this.$emit('item-click',item);
}
@item-click="cpmClick"
cpmClick: function(item){
// 处理逻辑
}
|
tips：传参只能使用‘-’命名法，否则失效
8.所有的组件都继承vue原型（学习vue-cli之后补充）
在main.js文件添加
1
| Vue.prototype.name = 'Jamie'
|
之后在所有组件中，只要使用
1
| console.log('this.name');
|
即可打印出来
原理就是先修改了vue的原型之后，所有继承于vue的组件对象中都拥有这个原型属性