vue组件之间数据共享
父向子传递数据
父组件App.vue
<template>
<div id="app">
<h1>APP根组件----{{this.msg}}-----{{countFromSon}</h1>
<hr>
<div class="box">
<Left :msg="msg" :user="userinfo"></Left>
</div>
</div>
</template>
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
name: 'App',
components: {
Left,Right
},
data(){
return{
msg:'hello',
userinfo:{
name:'wsc',
age:18
},
//定义一个countFromSon接受子组件传来的数据
countFromSon:0
}
},
methods:{
getNewCount(val){
this.countFromSon=val
},
getNewName(val){
this.msg=val
}
}
}
</script>
<style>
#app {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box{
display: flex;
}
</style>
子组件Left.vue
<template>
<div class="left-container">
<h3>Left组件</h3>
//子组件通过自定义属性调用父组件的值
<p>message的值是{{ msg }}</p>
<p>user的值是{{ user }}</p>
<button @click="message='abc'">修改msg</button>
<button @click="user.name='zs'">修改user</button>
</div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
//父向子传递值,自定义属性
props: ['msg', 'user'],
data() {
return {
message:'left',
}
}
}
</script>
<style scoped>
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
</style>
子组件向父组件传递值
子组件Right.vue
<template>
<div class="right">
<h3>Right组件-----{{count}}</h3>
<button @click="add">+1</button>
<button @click="sub">-1</button>
</div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
name: "Right",
data(){
return{
msg:'',
count:0,
msgFromLeft:''
}
},
methods:{
//子组件向父组件传递值,自定义事件
add(){
this.count+=1
this.$emit('numadd',this.count)
},
sub(){
this.count-=1
this.$emit('numsub',this.count)
},
}
}
</script>
<style scoped>
.right{
padding: 0 20px 20px;
background-color: lightskyblue;
min-height: 250px;
flex: 1;
}
h3 {
color: black;
}
</style>
父组件App.vue
<template>
<div id="app">
<h1>APP根组件----{{this.msg}}-----{{countFromSon}}</h1>
<hr>
<div class="box">
<Left :msg="msg" :user="userinfo"></Left>
</div>
</div>
</template>
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
name: 'App',
components: {
Left,Right
},
data(){
return{
msg:'hello',
userinfo:{
name:'wsc',
age:18
},
//定义一个countFromSon接受子组件传来的数据
countFromSon:0
}
},
methods:{
getNewCount(val){
this.countFromSon=val
}
}
}
</script>
<style>
#app {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box{
display: flex;
}
</style>
兄弟组件之间传递值
发送方Left.vue
<template>
<div class="left-container">
<h3>Left组件</h3>
<button @click="sendMsg">发送</button>
</div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
data() {
return {
str:'黑云压城城欲摧,甲光向日金鳞开。\n' +
'角声满天秋色里,塞上燕脂凝夜紫。\n' +
'半卷红旗临易水,霜重鼓寒声不起。\n' +
'报君黄金台上意,提携玉龙为君死。'
}
},
methods: {
//使用 bus.$emit('要触发的事件的名字',发送的消息)
sendMsg(){
bus.$emit('share',this.str)
console.log('this.sendMsg()')
}
}
}
</script>
<style scoped>
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
</style>
eventBus.js
import Vue from 'vue'
//创建vue实例对象,向外导出vue实例对象
export default new Vue()
消息接收方Right.vue
<template>
<div class="right">
<h3>Right组件</h3>
<p>{{msgFromLeft}}</p>
</div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
name: "Right",
data(){
return{
msgFromLeft:''
}
},
created() {
//通过bus.$on()方法进行监听
bus.$on('share',(val)=>{
this.msgFromLeft=val
})
}
}
</script>
<style scoped>
.right{
padding: 0 20px 20px;
background-color: lightskyblue;
min-height: 250px;
flex: 1;
}
h3 {
color: black;
}
</style>