vue组件之间的通信

1.组件之间的通信

①父子组件数据通信：
★第一种：父==》子 props，子==》父 触发自定义事件
第二种：父组件provide抛出数据，子组件injiect接收数据

②非父子组件之间的数据通信
★第一种：事件走总线Bus（空vue对象）
★第二种：状态管理库vuex

父组件provide抛出数据，子组件injiect接收数据

①app.vue
import Student from './components/Student.vue'
import {provide,reactive}from 'vue' // 发送单元 provide
export default {
name: 'App',
components: {
Student
},

setup(){
const student = reactive({
name:'zxh',
age:28,
sex:'男'
})
provide('stu',student) // 对外暴露
}
}

②Student。vue
<template>
<div>
<h1>我是子组件student.vue的内容</h1>
<p>{{ name }}</p>
<p>{{ age }}</p>
<p>{{ sex }}</p>
</div>
</template>

<script>
import {inject} from 'vue'; // 接收单元injiect
export default{
setup(){
const student = inject('stu');

return {...student}
}
}
</script>
<style scoped>
</style>

标签：vue,Student,provide,通信,student,组件,import
来源： https://www.cnblogs.com/ran777/p/16260605.html