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

vue3组件通信实例

news 来源：原创 2024/4/19 19:05:20

文章目录

父组件向子组件传递数据
父组件访问修改子组件数据、调用子组件方法
子组件访问修改父组件数据、方法
兄弟组件传值
Pinia通信

<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
});

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

父组件🌻 🌻🌻


	<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
	})

在这里插入图片描述

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

子组件A🌻 🌻🌻

defineEmits方式


  	<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组件数据');