Vue3子组件向父组件传值的两种实现方式

<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)
  # 父组件把子组件传过来的值放在了自己内部变量数组里
  subRequests.value.push(request)
}
</script>

<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>()
# 定义要发送的emit事件
const emit = defineEmits(['dropDownValueChange'])
const selectedValue = ref(props.title)

const click = (theType: string) => {
  console.log('clicked', theType)
  selectedValue.value = theType
  # 发送事件，theType就是发送出去的值
  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>