1 父子间通信
(1)父向子传递数据
在组件中,使用选项props来声明需要从父级接收到的数据。props的值有两种方式:
- 方式一:字符串数组,数组中的字符串就是传递时的名称。
- 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn :childrenprops='message'></cpn>
<cpn :childrenprops='message'></cpn>
<cpn :childrenprops='message'></cpn>
</div>
<template id="cpn">
<div>{{childrenprops}}</div>
</template>
<script src="vue.js"></script>
<script>
let a = new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
components: {
'cpn': {
template: '#cpn',
props: ['childrenprops']
},
}
})
</script>
</body>
</html>
在前面,我们的props选项是使用一个数组。我们说过,除了数组之外,我们也可以使用对象,当需要对props进行类型等验证时,就需要对象写法了。验证都支持哪些数据类型呢?
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
(2)子向父传递数据
我们需要使用自定义事件来完成。我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
- 在子组件中,通过$emit()来触发事件。
- 在父组件中,通过v-on来监听子组件事件。
我们来看一个简单的例子:
- 我们之前做过一个两个按钮+1和-1,点击后修改counter。
- 我们整个操作的过程还是在子组件中完成,但是之后的展示交给父组件。
- 这样,我们就需要将子组件中的counter,传给父组件的某个属性,比如total。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn @increment="changecount" @decrement="changecount"></cpn>
<span>点击次数:{{counter}}</span>
</div>
<template id="cpn">
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
changecount(counter) {
this.counter = counter;
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++;
this.$emit('increment', this.counter);
},
decrement() {
this.counter--;
this.$emit('decrement', this.counter);
},
}
}
}
})
</script>
</body>
</html>
(3)父子组件访问方式
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。
- 父组件访问子组件:使用$children或$refs
- 子组件访问父组件:使用$parent
1)$children