当前位置：首页 > news >正文

vue组件之间的数据共享

news 来源：原创 2024/9/21 17:41:45

一、组件之间的关系

1.父子关系

2.兄弟关系

3.后代关系

二、父子组件之间的数据共享

1.父-->子共享数据

父组件通过v-bind属性绑定向子组件共享数据，子组件需要使用props接受数据。

<template><p>父组件</p><Son :msg="msg" :count="count"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{msg:'hello',count:123}}
}
</script><template><p>子组件{{ msg }}{{ count }}</p>
</template>
<script>
export default {props:{msg:String,count:Number}
}
</script>

2.子-->父共享数据

子组件通过自定义事件向父组件共享数据。

<template><p>父组件{{ count }}</p><Son @countFn="changeFn"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{count:123}},methods:{changeFn(num){this.count+=num}}
}
</script><template><p>子组件 <button @click="addFn">按钮</button></p>
</template>
<script>
export default {emits:['countFn'],data(){return{count:123}},methods:{addFn(){this.$emit('countFn',this.count)}}
}
</script>

3.父<-->子双向数据同步

父组件在使用子组件期间，可以使用v-model指令维护组件内外数据的双向同步。

<template><p>父组件{{ count }}</p><Son v-model:count="count"></Son>
</template>
<script>import Son from './son.vue'export default {components:{Son},data(){return{count:123}}}
</script><template><p>子组件{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
export default {props:['count'],emits:['update:count'],methods:{addFn(){this.$emit('update:count',this.count+1)}}
}
</script>

三、兄弟组件之间的数据共享EventBus

兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方包mitt来创建eventBus对象，从而实现兄弟组件之间的数据共享。

1.创建eventBus，在数据的接收方和发送方共享eventBus对象。

2.数据接收方，导入并得到eventBus实例对象，调用eventBus的on()方法，声明自定义事件，通过事件回调接收数据。bus.on('事件名称', 事件处理函数)

3.数据发送方，导入并得到eventBus实例对象，调用eventBus的emit()方法，向外发送数据。

bus.emit('事件名称', 要发送的数据)

npm i mitt//eventBus.js
import mitt from 'mitt';
const bus = mitt();
export default bus;<template><p>父组件</p><div class="son"><Son1></Son1><Son2></Son2>  </div>
</template>
<script>
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default {components:{Son1,Son2},
}
</script><template><p>数据发送方son1:{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},methods:{addFn(){this.count+=1bus.emit('changeCount',this.count)}}
}
</script><template><p>数据接收方son2:{{ count }}</p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},created(){bus.on('changeCount',(count)=>{this.count =count })}
}
</script>

四、后代关系组件之间的数据共享provide和inject

指的是父节点的组件向其子孙组件共享数据。此时组件之间嵌套关系比较复杂，可以使用provide和inject实现后代关系组件之间的数据共享。

1.父节点使用provide

2.子孙节点使用inject数组，接收父级节点向下共享的数据。

3.父节点使用provide向下共享数据时，可以结合computed函数向下共享响应式数据。

<template><p>父组件</p>{{ color }}<button @click="color='blue'"> Toggle Blue</button><Leval2></Leval2> 
</template>
<script>
import {computed} from 'vue'
import Leval2 from './leval2.vue'
export default {components:{Leval2},data(){return{color:'red',}},provide(){return{count: 0,color:computed(()=> this.color),}}
}
</script><template><p>二级组件</p><Leval3></Leval3> 
</template>
<script>
import Leval3 from './leval3.vue'
export default {components:{Leval3},
}
</script><template><p>三级组件{{ count }}{{color}}</p>
</template>
<script>
export default {inject:['color','count']
}
</script>

五、全局数据共享vuex