詳解Vue3子組件向父組件傳遞消息

更新時間：2023年07月11日 11:27:42 作者：椿?

這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

父子組件之間的通信：props與emit

通常提到props，都會想到的是父組件給子組件傳值；提到emit為子組件向父組件發(fā)送消息，但其實，props也可以使子組件向父組件傳遞消息

方式為在父組件中通過為子組件綁定屬性，子組件接收；但其實，我們只需要父組件向子組件傳遞一個事件，使子組件調(diào)用該事件來獲取子組件的消息

常規(guī)使用

<!-- 子組件A -->
<template>
  <div style="color:coral">
    我是B的子組件A
  </div>
</template>
<script setup>
	import { onMounted } from "vue";
	const props = defineProps({
	  msg: String
	})
	onMounted(() => {
	  console.log('我是A，我接收到B給我傳遞的消息', props);
	})
</script>

<!-- 父組件B -->
<template>
  <div>
    <h1>我是父組件B，下面是我的子組件A</h1>
    <A msg="我是父組件B，我現(xiàn)在向A組件傳遞消息"></A>
  </div>
</template>
<script setup>
	import A from "../components/A.vue"
</script>

子組件向父組件傳遞消息

<!-- 子組件A -->
<template>
  <div style="background:gainsboro">
    <h3 style="color:coral">我是B的子組件A</h3>
    <button @click="send">向B發(fā)消息</button>
  </div>
</template>
<script setup>
	import { onMounted } from "vue";
	const props = defineProps({
	  msg: String,
	  myFn: Function
	})
	onMounted(() => {
	  console.log('我是紅薯我是紅薯，收到收到', props);
	})
	const send = () => {
	  props.myFn('我是A,我調(diào)用B的事件向它發(fā)送此消息：嘿~土豆')
	}
</script>

<!-- 父組件B -->
<template>
  <div>
    <p>我是父組件B，我傳遞給A組價的事件，A調(diào)用后我可以接收到：
      <span style="color:darkorange">{{state.childMsg}}</span>
    </p>
    <h1>我是父組件B，下面是我的子組件A</h1>
    <A
      msg="我是土豆我是土豆，收到請回答"
      :myFn="state.fn"
    ></A>
  </div>
</template>
<script setup>
	import { reactive } from "vue";
	import A from "../components/A.vue"
	const state = reactive({
	  childMsg: '暫無消息',
	  fn: (data) => {
	    state.childMsg = data
	  }
	})
</script>