Class15 - Vue 父子组件传值
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue父子组件传值
- 父组件向子组件传值
若仅仅只需要传值一次,可以采用定义一个data
属性,接受props
传递过来的值。
首先定义父子组件: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
45var children = {
template: `
<div>
<h5>我是子组件</h5>
<button @click="childrenAdd">Add(子)</button>
<div>子组件值:{{cnum}}</div>
</div>`,
props: {
num: Number
},
data:function(){
return{
cnum:this.num
}
},
methods:{
childrenAdd(){
this.cnum++;
}
}
}
var parent = {
template: `
<div>
<h5>我是父组件</h5>
<button @click="changeNum">父组件方法</button>
<div>父组件值:{{num}}</div>
<children v-bind:num="num"></children>
</div>
`,
components: {
children: children
},
data: function () {
return {
num: 10
}
},
methods: {
changeNum(){
this.num = 12;
console.log(this.num);
}
}
}
此时,我需要传递num
,则只会将初始化的值传递给子组件,接下来父组件更改num
的值,子组件中无法实时更新,子组件中更新值,也和父组件无关,如下:
源码
1 |
|
- 子组件监听父组件数据变化-发生实时变化
若需要实现监听父组件数据,则需要父组件传递数据发生变化,因此我们定义两个按钮方法,来改变num
的值,一个更改为12
,一个更改为13
此时,我们需要在子组件中添加watch
,去监听父组件的变化,此时需要注意监听对象的类型。1
2
3
4
5
6watch: {
num(newVal, oldVal) {
console.info('value changed 2', newVal)
this.cnum = newVal
}
}
效果如下:
可以看出此时若是,父组件数据源不发生改变(例如连续点父组件方法(12)
),则只有第一次起作用,因为后续没有改变父组件数据,当切换点击父组件方法(12)
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# 源码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>parent children</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script type="text/javascript">
//定义一个子组件
var children = {
template: `
<div>
<h5>我是子组件</h5>
<button @click="childrenAdd">Add(子)</button>
<div>子组件值:{{cnum}}</div>
</div>`,
props: {
num: Number
},
watch: {
num(newVal, oldVal) {
console.info('value changed 2', newVal)
this.cnum = newVal
}
},
data:function(){
return{
cnum:this.num
}
},
methods:{
childrenAdd(){
this.cnum++;
}
}
}
var parent = {
template: `
<div>
<h5>我是父组件</h5>
<button @click="changeNum">父组件方法(12)</button>
<button @click="changeNum2">父组件方法(13)</button>
<div>父组件值:{{num}}</div>
<children v-bind:num="num"></children>
</div>
`,
components: {
children: children
},
data: function () {
return {
num: 10
}
},
methods: {
changeNum(){
this.num = 12;
console.log(this.num);
},
changeNum2(){
this.num = 13;
console.log(this.num);
}
}
}
var app = new Vue({
el: "#app",
components: {
parent: parent
}
})
</script>
</body>
</html>
- 父组件监听子组件数据变化-发生实时变化
此时则相当于双向绑定数据,需要定义一个子组件方法定义父组件方法来绑定数据变化。如下,
1 | <children @add="parentAdd" v-bind:num="num"></children> |
并使用$emit
方法来,调用父组件方法。
效果如下:
源码
1 | --- |