vue3 传值方式

Posted 2022-11-29 仲夏の梦

一.父传子传递

// 父组件
<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>