1、组件化开发
1.1、注册组件的基本步骤
- 创建组件构造器
- 组测组件
- 使用组件
1 | <div id="app"> |
说明:组件必须定义在某个vue实例下,否则不生效
1.2、全局组件和局部组件
当用Vue.component()注册主键的时候,组件的注册是全局的。意味着可以在任意的vue下使用
1 | <div id="app1"> |
如果挂载在某个实例中,则这就是一个局部组件
1 | <div id="app1"> |
1.3、父组件和子组件
一个组件中,定义另一个组件
1 | <div id="app"> |
1.4、注册主键语法糖
简单写法中省去了Vue.extend()的步骤
可以直接用一个对象来代替
1 | <div id="app"> |
1.5、模板的分离
- 组件中数据存放问题:需要用函数返回,而不是数组。因为为了调用组件时每次调用都是一个新的组件,并且组件中相互不影响,则需要用函数表示。
1 | <div id="app"> |
1.6、组件不能直接访问Vue的实例
1 | <div id="app"> |
1.7、组件通信——父组件向子组件发消息
- 在组件中,使用选项props来声明需要从父级接收到的数据
- props的值有两种方式
- 方式一:字符串数组,数组中的字符串就是传递时的名称
- 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
1 | <div id="app"> |
1.8、组件通信——子组件向父组件传递数据
1 | <div id="app"> |
1.9、父子组件的访问方式:$children
父组件访问子组件:使用$children 或者$refs
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
48
49<div id="app">
<div>{{ message }}</div>
<button @click="btnClick">按钮</button>
<cpn ref="aaa"></cpn>
</div>
<template id="cpn">
<div>
<div>我是子组件</div>
</div>
</template>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello vue"
},
methods:{
btnClick(item) {
//1 $child
console.log(this.$children);
this.$children[0].showMessage();
console.log(this.$children[0].name);
//2 定义ref
this.$refs.aaa.showMessage()
console.log(this.$refs.aaa.name);
}
},
components:{
cpn:{
template:`#cpn`,
data(){
return {
name:'我是子组件name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
}
});
</script>子组件访问父组件:使用$parent
1 | <div id="app"> |