vue3 传值方式
Posted 仲夏の梦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3 传值方式相关的知识,希望对你有一定的参考价值。
一.父传子传递
// 父组件
<div>
<children :flag="state.eflag" />
</div>
<script setup>
import children from './children.vue'
import reactive from 'vue'
const state = reactive(
eflag: true,
)
</script>
// 子组件
<div>
<div> flag </div>
</div>
<script setup>
const prop = defineProps(
flag:
type: Boolean, // Object , Array , Function , Number
default: false
)
</script>
二.子传父传递
// 子组件
<template>
<div >
<el-button type="primary" @click="handleEdit(item)">
点我
</el-button>
</div>
</template>
<script setup>
// handleEdit子组件方法, selfDataEdit父组件方法
const emit = defineEmits([
'selfDataEdit',
])
const handleEdit = (row) =>
emit('selfDataEdit', row)
defineExpose(
handleEdit,
)
</script>
// 父组件
<template>
<div>
<Table @selfDataEdit="handleEdit"></Table>
</div>
</template>
<script setup>
import Table from '@/components/common/Table/index.vue'
const handleEdit = (value) =>
// 要执行的方法
</script>
以上是关于vue3 传值方式的主要内容,如果未能解决你的问题,请参考以下文章