Vue 父子组件、兄弟组件传值
2021-02-05 本文已影响0人
别吵让我睡觉
题记
一直想总结这方面的知识，恰好上周又用到了，所以直接一次性总结了😀
我的理解
对于两个页面传值，我之前的理解一直停留在第一个页面跳转到第二个页面，作为参数携带过去的某些值。后来涉及到两个页面互相传值，就有点难受了，然后查了下，发现了父子、兄弟组件。其中的兄弟组件用的比较多。
父子组件传值
父组件结构样例
<template>
<div>
<h1>父组件</h1>
<child></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: 'father',
components: {
child
},
data() {
return {
}
}
}
</script>
子组件结构样例
<template>
<div>
<h1>子组件</h1>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
}
},
}
</script>
第一种情况：父组件给子组件传值
关键：子组件通过
props获取父组件传来的值
父组件结构
<template>
<div>
<h1>父组件</h1>
<child :sendMessage="fatherMessage"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: 'father',
components: {
child
},
data() {
return {
fatherMessage: 'hello，my son' // 传递给子组件的值
}
}
}
</script>
子组件结构
<template>
<div>
<h1>子组件</h1>
<span>获取父组件的值:{{sendMessage}}</span>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
}
},
props: ['sendMessage'] // 拿到父组件的值绑定到sendMessage，然后在子组件下显示出来
}
</script>
第二种情况：子组件给父组件传值
关键：
子组件通过触发事件$emit给父组件传值
父组件通过v-on:监听子组件的状态
子组件结构
<template>
<div>
<h1>子组件</h1>
<button @click="sendToFather">子组件给父组件传值</button>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
childMessage: 'hello，my father'
}
},
methods: {
sendToFather: function() {
// 参数1 getChildValue作为中间状态，参数2 this.childMsg即为传递给父组件的数据
this.$emit('getChildValue', this.childMessage);
}
}
}
</script>
父组件结构
<template>
<div>
<h1>父组件</h1>
<!-- 引入子组件 定义一个on的方法监听子组件的状态，然后通过getChild方法获取子组件传递的数据-->
<child v-on:getChildValue="getChild"></child>
<span>这是来自子组件的数据：{{childValue}}</span>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: 'father',
components: {
child
},
data() {
return {
childValue: ''
}
},
methods: {
getChild: function(data) {
// 此时的参数data为子组件传递的值，即this.$emit()的第二个参数
this.childValue = data;
}
}
}
</script>
兄弟组件传值
原理：这个也可以称为同级组件之间的传值。思路就是通过一个中间桥来进行传值，它承担起了组件之间通信的桥梁，也就是中央事件总线，推荐直接使用vuex进行状态管理会比较方便。
关键：
第一个组件通过中间桥将信息暴露出去
第二个组件通过中间桥监听暴露事件，然后通过回调函数获取信息
步骤
1.创建一个中间事件总线（在某个文件夹下面创建一个.js文件）
import Vue from 'vue'
export default new Vue()
2.第一个组件
<template>
<div>
<p>第一个组件</p>
<button @click="sendMsg">向第二个组件发送信息</button>
</div>
</template>
<script>
// 导入中间桥
import bridge from '../tools/center'
export default {
data () {
return {}
},
methods: {
sendMsg () {
bridge.$emit('firstMsg', 'hello，my partner')
}
}
}
</script>
3.第二个组件
<template>
<div>
<p>第二个组件</p>
<p>从同级组件传递过来的信息：{{message}}</p>
</div>
</template>
<script>
// 导入中间桥
import bridge from '../tools/center'
export default {
data () {
return {
message: '默认值'
}
},
mounted () {
let _this = this
bridge.$on('firstMsg', function (msg) {
_this.message = msg
})
}
}
</script>
