vue3组件通信

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

文件目录结构

👨🏻 父组件向子组件传递数据

props方式

👨🏻 父组件

    <childA :isPropData="state.isPropData" />
    <childB />
 
	 const state = reactive({
	    isPropData:'来自父组件数据',
	 });
 

👶🏼 子组件A

	import { reactive,defineProps, onBeforeMount, onMounted } from 'vue';
	onMounted(() => {});
	//接收
	const props = defineProps({
	  isPropData: {
	    type: String,
	    default: () => '',
	  },
	})

provide/inject方式

👨🏻 父组件

import { provide } from 'vue';

// 向子组件传递数据
provide('fromParent', '123456')

👶🏼 子组件A

import { inject } from 'vue';

onMounted(() => {
  console.log(inject('fromParent')); //123456
});

👨🏻 父组件访问修改子组件数据、调用子组件方法

ref 方式

👨🏻 父组件

	<childA ref="isA" :isPropData="state.isPropData" />
	
	//获取到子组件
	const isA = ref(null);
	
	onMounted(() => {
	    //修改A组件数据
	    isA.value.state.data = 123
	    //访问A组件数据
	    console.log(isA.value.state.data);
	    //调用A组件方法
	    console.log(isA.value.afn());
	    
	});
	

👶🏼 子组件A

	
	import { reactive,defineProps,defineExpose, onBeforeMount, onMounted } from 'vue';
	
	const state = reactive({
	  data:'我是a组件数据'
	});
	
	//a组件方法
	const afn=()=>{
	  console.log('a组件方法执行');
	}
	
	//暴露私有数据与方法
	defineExpose({
	  state,
	  afn
	})

👶🏼 子组件访问修改父组件数据、方法

defineEmits 方式

👶🏼 子组件A

  	<div @click="getData"> A点击 </div>
	import { defineEmits, onBeforeMount, onMounted } from 'vue';
	
	//定义触发的方法
	const emit = defineEmits(["changeData"]);
	
	const getData = ()=>{
	  emit("changeData", '传给父组件数据');
	}
	

👨🏻 父组件

    <childA ref="isA" @changeData="doFn" :isPropData="state.isPropData" />

	const doFn = ()=>{
 	   console.log('访问、修改父组件数据');
   		 //TODO
	}
	

**👶🏼 子组件修改父组件数据 **

update 方式

👶🏼 子组件A

     <div @click="titleChange">
        改变title
      </div>
      
	const emit = defineEmits(["changeData",'update:title']);

	const titleChange = ()=>{
	  emit('update:title', 'title改变啦！')
	}
	

👨🏻 父组件

 <childA :title="title" @update:title="state.title = $event"  />

 const state = reactive({
    title:'组件通信'
 });

 //触发titleChange 事件 title 更改 为'title改变啦！'

🧑🏻‍🤝‍🧑🏻 兄弟组件传值

子组件B向A组件传值 & 数据操作

安装 mitt 组件通信工具
npm install mitt@3.0.0 -S
mitt 适用所有父子、兄弟等所有关系的组件通信

main.js

	let app = createApp(App)
	app.config.globalProperties.$EventBus = new mitt();

👶🏼 子组件A

	
	  import { getCurrentInstance } from 'vue';
	  const { proxy } = getCurrentInstance();
	  
	  //先解绑避免重复绑定
	  proxy.$EventBus.off('setTH');
	  
	  //监听
	  proxy.$EventBus.on('setTH', () => {
	    //TODO
	  });
	  

👶🏼 子组件B

	
	  import { getCurrentInstance } from 'vue';
	  const { proxy } = getCurrentInstance();
	  
	  //触发子组件方法
	  proxy.$EventBus.$emit('setTH', 'B组件传给A组件数据');
	  

👨‍👧‍👧 Pinia通信

文章链接💥 vue3Pinia状态管理