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

目錄 父子組件之間的通信：props與emit 常規使用 子組件向父組件傳遞消息 與emit的區別：定義和調用的不同 父子組件之間的通信：props與emit 通常提到props，都會想到的是父組件給子組件

目錄

• 父子組件之間的通信：props與emit
• 常規使用
• 子組件向父組件傳遞消息
• 與emit的區別：定義和調用的不同

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

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

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

常規使用

<!-- 子組件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，我現在向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發消息</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,我調用B的事件向它發送此消息：嘿~土豆')
	}
</script>

<!-- 父組件B -->
<template>
  <div>
    <p>我是父組件B，我傳遞給A組價的事件，A調用后我可以接收到：
      <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>

當子組件A點擊“向B發送消息” 調用了這個myFn的函數，并且傳遞參數，父組件B中就可以收到A傳遞的參數，此時就完成了子組件行父組件傳遞消息

與emit的區別：定義和調用的不同

props方式：父組件為子組件綁定一個屬性，將函數賦值給該屬性，子組件通過props接收，調用此事件，傳遞消息。emit方式：父組件需要在子組件標簽中注冊一個事件，子組件通過emit調用此事件，傳遞消息。

到此這篇關于詳解Vue3子組件向父組件傳遞消息的文章就介紹到這了,更多相關Vue3子組件向父組件傳遞消息內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！