Vue3子组件向父组件传值的两种实现方式
作者：thonmsneee98
近期学习vue3的父子组件之间的传值,发现跟vue2的并没有太大的区别,这篇文章主要给大家介绍了关于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>方式二：子组件发送emit方法给父组件
例子在子组件里，就两步要做：1. 定义emits事件，2，在想要的时机发送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>()
# 定义要发送的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>
这两种方法我都在自己代码里用过了，亲测可用。优不优雅就另说了，先能用再说吧
总结
到此这篇关于Vue3子组件向父组件传值的两种实现方式的文章就介绍到这了,更多相关Vue3子组件向父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！