标签：vue Student provide 通信 student 组件 import

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。