Vue3子組件向父組件傳值的兩種實現(xiàn)方式

更新時間：2024年04月11日 09:05:22 作者：thonmsneee98

近期學習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關于Vue3子組件向父組件傳值的兩種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

方式一：

父組件傳送一個處理方法給子組件，子組件調用這個處理方法把父組件關心的值作為參數(shù)傳給這個處理方法。

例子：================子組件 (父組件在下面）

<template>
  <el-form :inline="true" :model="request" class="demo-form-inline">
    <el-form-item>
      <target-type-drop-down />
    </el-form-item>
    <el-form-item>
      <include-type />
    </el-form-item>
    <el-form-item label="Include">
      <el-input v-model="request.number" placeholder="3" />
    </el-form-item>
    <el-form-item>
    	# 當button被按下時，子組件里的request變量內容就會傳給父組件的處理方法
      <el-button type="primary" @click="parentMethod(request)"
        >Generate Req</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { subRequest } from '@cp/MyTypes'
const request = ref<subRequest>({number: 3});

# 定義從父組件接收的處理方法
defineProps({
  parentMethod: {
    type: Function,
    default: () => {},
  },
})

================父組件

<template>
	# 父組件傳送給子組件的處理方法
  <request-gen v-if="showGenFlag" :parentMethod="childValueHandlingMethod" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { subRequest } from '@cp/MyTypes'

const subRequests = ref<subRequest[]>([])

const childValueHandlingMethod = (request: subRequest) => {
  console.log('Hello I am from children component', request)
  # 父組件把子組件傳過來的值放在了自己內部變量數(shù)組里
  subRequests.value.push(request)
}
</script>

方式二：子組件發(fā)送emit方法給父組件

例子在子組件里，就兩步要做：1. 定義emits事件，2，在想要的時機發(fā)送emits事件
================子組件 (父組件在下面）

<template>
  <el-dropdown class="margin-right">
    <el-button type="info">
      {{ selectedValue
      }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="theType in items"
          :key="`${theType}`"
          @click="click(theType)"
          >{{ theType }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts" setup>
import { computed, defineEmits, ref } from 'vue'
import { ToRef } from 'vue-demi'

interface Props {
  items: String[]
  title: String
}
const props = defineProps<Props>()
# 定義要發(fā)送的emit事件
const emit = defineEmits(['dropDownValueChange'])
const selectedValue = ref(props.title)

const click = (theType: string) => {
  console.log('clicked', theType)
  selectedValue.value = theType
  # 發(fā)送事件，theType就是發(fā)送出去的值
  emit('dropDownValueChange', theType)
}
</script>

================父組件

<template>
  <common-drop-down
    title="Fruits"
    :items="items"
    @dropDownValueChange="fruitValueChange"
  />
</template>
<script lang="ts" setup>
import { ToRef } from "vue-demi"

const items = ['Apple', 'Orange', 'Pineapple', 'Banana']
const fruitValueChange = (e: any): void => {
  console.log('in parent compoennt, e=', e)
}
</script>

這兩種方法我都在自己代碼里用過了，親測可用。優(yōu)不優(yōu)雅就另說了，先能用再說吧