父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件: $emit 方法传递参数
讨论1:子组件向父组件传值
方法一:子组件绑定一个事件,通过 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.emit(‘handleChange’, ‘Jack’) // 触发父组件中handleChange事件并传参Jack
// 注:此处事件名称与父组件中绑定的事件名称要一致
}
}
}
b,在父组件中定义并绑定 handleChange 事件
// 父组件
<child @handleChange=“changeName”>
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}
方法二:通过 callback 函数
a,先在父组件中定义一个callback函数,并把 callback 函数传过去
// 父组件
methods: {
callback: function(name) {
this.name = name
}
}
b,在子组件中接收,并执行 callback 函数
// 子组件
<button @click=“callback(‘Jack’)”>改变父组件的name
props: {
callback: Function,
}
方法三:通过 $parent / $children 或 $refs 访问组件实例
这两种都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据。
a,// 子组件
export default {
data () {
return {
title: ‘子组件’
}
},
methods: {
sayHello () {
console.log(‘Hello’);
}
}
}
b,// 父组件
注:这种方式的组件通信不能跨级。
讨论二:父组件向子组件传值
即父组件通过属性的方式向子组件传值,子组件通过 props 来接收。
在父组件的子组件标签中绑定自定义属性
// 父组件
export default {
components: {
UserDetail
}
…
}
在子组件中使用props(可以是数组也可以是对象)接收即可。可以传多个属性。
// 子组件
export default {
props: [‘myName’]
}
注:基于 vue 的单向数据流,即组件之间的数据是单向流通的,子组件是不允许直接对父组件传来的值进行修改的,所以应该避免这种直接修改父组件传过来的值的操作,否则控制台会报错。
具体操作是可以先把传过来的值重新赋值给data中的一个变量,然后再更改那个变量。
讨论三:兄弟组件之间传值
方法一:通过 $emit 和 props 结合的方式
a,在父组件中给要传值的两个兄弟组件都绑定要传的变量,并定义事件
// 父组件
<child-b :myName=“name” @changeName=“editName” />
export default {
data() {
return {
name: ‘John’
}
},
components: {
‘child-a’: ChildA,
‘child-b’: ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}
b,在子组件B中接收变量和绑定触发事件
// child-b 组件
<p>姓名:{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default {
props: ["myName"],
methods: {
changeName() {
this.$emit('changeName', 'Lily') // 触发事件并传值
}
}
}
</script>
c,在子组件A接收改变后父组件的值
// child-a 组件
<p>姓名:{{ newName }}</p>
<script>
export default {
props: ["myName"],
computed: {
newName() {
if(this.myName) { // 判断是否有值传过来
return this.myName
}
return 'John' //没有传值的默认值
}
}
}
</script>
即:当子组件B 通过 $emit() 触发了父组件的事件函数 editName,改变了父组件的变量name 值,父组件又可以把改变了的值通过 props 传递给子组件A,从而实现兄弟组件间数据传递。
方法二: 通过一个空 vue 实例
a,创建一个 EventBus.js 文件,并暴露一个 vue 实例
import Vue from 'Vue'
export default new Vue()
b,在要传值的文件里导入这个空 vue 实例,绑定事件并通过 $emit 触发事件函数
(也可以在 main.js 中全局引入该 js 文件,我一般在需要使用到的组件中引入)
<template>
<div>
<p>姓名: {{ name }}</p>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: 'John',
}
},
methods: {
changeName() {
this.name = 'Lily'
EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
}
}
}
</script>
c,在接收传值的组件中也导入 vue 实例,通过 $on 监听回调,回调函数接收所有触发事件时传入的参数
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}
注:这种通过创建一个空的 vue 实例的方式,相当于创建了一个事件中心或者说是中转站,用来传递和接收事件。这种方式同样适用于任何组件间的通信,包括父子、兄弟、跨级,对于通信需求简单的项目比较方便,但对于更复杂的情况,或者项目比较大时,可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理
方法三:使用 vuex
大总结:
父子通信: 父向子传递数据是通过 props,子向父是通过 $emit;通过 $parent /
c
h
i
l
d
r
e
n
通
信
;
children 通信;
children通信;ref 也可以访问组件实例;provide / inject ;$attrs / $listeners;
兄弟通信: EventBus;Vuex;
跨级通信: EventBus;Vuex;provide / inject ;$attrs / $listeners;