组件之间传值
在vue中,组件之间的传值大致可以分为以下三种:
1.父向子传值:也就是父组件传数据到子组件
2.子向父传值:也就是子组件传数据到父组件
3.非父子传:也就是非父子关系的组件相互传数据
父组件向子组件传值
父项向子项传值主要采用的方法是:props
父组件
<template>
<div>
<child :msg="msg"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
msg: '父的数据'
}
}
}
</script>
子组件
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
props: {
msg: {
required: true,
type: String
}
}
}
</script>
子组件向父组件传值
子项向父项传递数据通过父项向子项传递方法的时候,将数据通过实参的方式传递给父项。
父组件
<template>
<div>
<child :msg="msg" @childMethod="getChildData"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
msg: '父的数据'
}
},
methods: {
getChildData(data) {
console.log('来自子组件的数据', data)
}
}
}
</script>
子组件
<template>
<div>
{{msg}}
<button @click="handleClick">按钮</button>
</div>
</template>
<script>
export default {
props: {
msg: {
required: true,
type: String
}
},
data() {
return {
childMsg: '子数据'
}
},
methods: {
handleClick() {
this.$emit('childMethod', this.childMsg)
}
}
}
</script>
非父子组件传值
不是父子关系的组件A与组件B之间传递数据,可以使用一个空的Vue实例来作为事件总线。将这个Vue示例明明为 b u s 并 挂 载 在 V u e 的 原 型 上 。 在 A 组 件 中 使 用 ‘ t h i s . bus并挂载在Vue的原型上。 在A组件中使用 `this. bus并挂载在Vue的原型上。在A组件中使用‘this.bus. e m i t ( ) ‘ 触 发 事 件 在 B 组 件 使 用 ‘ t h i s . emit()` 触发事件 在B组件使用 `this. emit()‘触发事件在B组件使用‘this.bus. $on()` 绑定并监听事件(一般在created钩子中)
main.js
import Vue from 'vue'
const bus = new Vue
Vue.prototype.$eventBus = bus
父组件
<template>
<div>
<child1></child1>
<hr>
<child2></child2>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
components: {
child1,
child2
},
data() {
return {
msg: '父的数据'
}
},
methods: {
getChildData(data) {
console.log('来自子组件的数据', data)
}
}
}
</script>
组件A
<template>
<div>
<h4>我是child1组件,我要监听child2中的num发生的变化</h4>
</div>
</template>
<script>
export default {
created() {
this.$eventBus.$on('numChange', (data) => {
console.log('监听到了child2中num变了', data)
})
}
}
</script>
组件二
<template>
<div>
<h4>我是child2组件,num现在为 {{num}}</h4>
<button @click="changeNum">num+1</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
methods: {
changeNum() {
++this.num;
this.$eventBus.$emit('numChange', this.num)
}
}
}
</script>