vue中兄弟组件之间传值
Vue中组件传值,兄弟组件之间传值
·
兄弟组件之间的传值,使得兄弟组件之间可以联动,相互操作
方法一:子传父,父传子
我们知道,兄弟组件上面肯定有一个父组件,那么你想一下,我们可以将子组件的值用$ eimt方法传递给父组件(当然还有很多方法,比如$parent.xxx,当然xxx为父组件的一个函数)小编专门做了一期组建之间的传值,不会的小伙伴可以去看看,也可以将父组件的值用prop方法传递给子组件。想一下,经过这么峰回路转,是不是可以将兄弟A组件的值传递给父组件,然后父组件又可以将值传递给子组件B呢,来,上代码
组件A:
<template>
<div class="ul">
</div>
</template>
<script>
export default {
name: 'A',
data() {
return {
todos: [
{id: '001', name: '吃饭', isOk: false},
],
};
},
mounted() {
this.$emit('dataAll',this.todos) //$emit传两个参数,第一个为父组件的自定义事件,第二个参数就是要带过去的值
},
};
</script>
<style scoped>
</style>
父组件:
<template>
<div id="app">
<A @dataAll = 'dataAll'></A> //自定义一个事件
<B :todoB="todosApp"></B>
</div>
</template>
<script>
import B from './components/B';
import A from './components/A';
export default {
name: 'App',
components: {A,B},
data() {
return {
todosApp: [],
};
},
methods: {
dataAll(val) {
this.todosApp = val;
console.log(val) //当然这里输出的是子组件穿过来的todos
},
},
};
</script>
组件B
<template>
<div>
<!-- todoB.name = 吃饭 -->
{{todoB.name}}
</div>
</template>
<script>
export default {
name: 'B',
props:['todoB'],
};
</script>
<style scoped>
</style>>
以上代码看懂了吗小伙伴,我们实现了A组件与B组件之间的通讯
方法二:bus总线传值
思路:在Vue的原型上创建一个属性bus,该属性的值为new Vue(),即bus也是一个vue实例
- 在main.js中创建总线
main.js:
Vue.prototype.bus = new Vue()
- 在子组件A中抛出信息和值,this.bus就是vue的实例,$emit也是上面的方法
<template>
<div class="ul" @click='pop'>
</div>
</template>
<script>
export default {
name: 'A',
data() {
return {
todos: [
{id: '001', name: '吃饭', isOk: false},
],
};
},
methods() {
pop(){
this.bus.$emit('todosAll',this.todos)
}
},
};
</script>
<style scoped>
</style>
- 在子组件B中,在生命周期函数上获取传过来的值
<template>
<div>
</div>
</template>
<script>
export default {
name: 'B',
mounted(){
this.bus.$on('todosAll',res => {
console.log(res) // 输出的是A组件传过来的{id: '001', name: '吃饭', isOk: false}
})
}
};
</script>
<style scoped>
</style>>
注意:当组件A中的bus触发,那么组件B中就会相应是触发,B组件中的bus,必须是在函数里面,比如生命周期函数,甚至data函数里面也是可以的。
小伙伴们,你们学废了吗哈哈哈,欢迎各位大神多多提宝贵意见。
更多推荐
已为社区贡献2条内容
所有评论(0)