概述
vue中组件之间的传值传值情况主要有以下三种
父组件向子组件传值
子组件向父组件传值
兄弟组件之间相互传值或者是两个没有关系的组件之间的传值
在开始介绍之前我们先建立3个vue文件，文件名分别为:Parent.vue , Child1.vue , Child2.vue
1、父组件向子组件传值
这种情况是三种传值方案中最简单的, 通过在子组件中使用 props就可以实现
父组件Parent.vue中的代码
<template>
<div>
<child-1 :btnName="btnName"/>
</div>
</template>
<script>
import Child1 from './Child1'
export default {
name: 'Parent',
components: {
'child-1': Child1
},
data () {
return {
btnName: ' 我是一个button'
}
}
}
</script>
子组件Child1.vue
<template>
<button > {{btnName}}</button>
</template>
<script>
export default {
name: 'Child1',
props: ['btnName']
}
</script>
<style>
button{
padding:5px 10px;
margin:2px;
background-color:#fff;
border-radius: 5px;
}
</style>
关键点就是需要在子组件中 使用 props 关键字 来接收父组件传过来的值
2、子组件向父组件传值
在子组件向父组件传值时需要使用 vue 中的 emit ，使用
on 中监听的事件，现在我们来实现一个可以统计按钮点击次数的功能
在父组件中有个 count 字段用于统计，button点击的次数
首先我们需要在Parent.vue的data中定义count变量，默认值为0，代码如下：
data () {
return {
btnName: ' 我是一个button',
count: 0
}
}
然后将count加入到template中便于显示, 此时parent.vue的template的代码如下
<template>
<div>
<p>点击次数: {{count}}</p>
<child-1 :btnName="btnName"/>
</div>
</template>
接下来我们需要在父组件中增加一个可以改变count值的事件,同时在 中加上监听事件
<template>
<div>
<p>点击次数: {{count}}</p>
<child-1 :btnName="btnName" @update:count="changeCount"/>
</div>
</template>
<script>
import Child1 from './Child1'
export default {
name: 'Parent',
components: {
'child-1': Child1
},
data () {
return {
btnName: ' 我是一个button',
count: 0
}
},
methods: {
changeCount () {
++this.count
}
}
}
</script>
子组件Child1.vue
<template>
<button @click="clickHandle"> {{btnName}}</button>
</template>
<script>
export default {
name: 'Child1',
props: ['btnName'],
methods: {
clickHandle () {
this.$emit('update:count')
}
}
}
</script>
现在通过点击button即可实现改变count的值
3、兄弟组件之间的传值
(1)将需要改变的值放到父组件中，子组件通过props来获取父组件的值
(2)通过eventbus 来实现兄弟组件之间的传值，其原理还是通过 emit来时实现的，区别是现在全局建立一个空的vue对象，然后将事件绑定到该空对象上，最后通过该空对象来触发$on监听的事件
兄弟A
<template>
<div class="comA">
<input type="button" value="comA" @click="toB" />
</div>
</template>
<script>
import bus from "../bus.js";
export default {
created() {
bus.$on("toA", value => {
console.log("组件A");
console.log(value);
});
},
methods: {
toB() {
bus.$emit("toB", "来自于A的数据");
}
}
};
</script>
<style>
.comA {
width: 200px;
height: 200px;
background-color: hotpink;
display: inline-block;
margin-right: 10px;
}
</style>
兄弟B
<template>
<div class="comB">
<input type="button" value="comB" @click='toA' />
</div>
</template>
<script>
import bus from '../bus.js'
export default {
created() {
bus.$on('toB',(value)=>{
console.log('组件B');
console.log(value);
})
},
methods: {
toA(){
bus.$emit('toA','来自于B的数据哦！！！#@！#！@#@！@#！！@#')
}
},
};
</script>
<style>
.comB {
width: 200px;
height: 200px;
background-color: #0094ff;
display: inline-block;
margin-right: 10px;
}
</style>
用法较为复杂名 , 需要在多个组件中 监听和触发事件 , 不利于维护
这样情况直接用Vuex1就可以了 . 所以bus模式 , 基本上已经摒弃了
