我們想要監(jiān)聽(tīng)組件A里面data里的某個(gè)值，然后傳給組件B使用恳邀，還要達(dá)到動(dòng)態(tài)改變組件B里面data里的某個(gè)值
目錄下新建一個(gè)公共文件 pubilc.js
import Vue from 'vue'
export default new Vue()
在組件A：save.vue中導(dǎo)入pubilc.js
<template>
<div>
<i class="iconfont icon-camera" @click="testA">
<div>
</template>
<script>
import Public from './public.js'
export default {
name: "save",
data() {
return {
data_1: 0,
};
},
components: {},
created() {},
methods: {
testA() {
this.data_1 += 1
Public.$emit('transportData', this.data_1); //監(jiān)聽(tīng)data_1的變化
},
}
};
</script>
在組件B：show.vue中導(dǎo)入pubilc.js
<template>
<div>
<i class="iconfont icon-layer" @click="testB">
<div>
</template>
<script>
import Public from './public.js'
export default {
name: "show",
data() {
return {
data_1: 0,
data_2: 0,
};
},
components: {},
created() {
Public.$on('transportData', val => { //接收save.vue中傳過(guò)來(lái)的data_1的值
this.data_1 = val;
});
},
methods: {
testB() {
this.data_2 = this.data_1 + 100;
console.log(this.data_2);
},
}
};
</script>
