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 传值方式的主要内容,如果未能解决你的问题,请参考以下文章

vue3 传值方式

Vue3组件(18)组件间传值/共享的方法的汇总

一张图说清楚Vue3父子组件传值,以及props可否改的本质问题

VUe3组件传值

Vue3 数据双向绑定与动态传值响应

vue3实现父组件向子组件传值并监听props改变触发事件