vue3 传值方式

Posted 2023-02-16 仲夏の梦

一.Props（父传子）

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

二.emit（子传父）

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

三.v-model

// 父组件
<template>
    <child-components v-model:num="state.num"></child-components>
</template>

<script setup>
    import  reactive  from 'vue'
    import ChildComponents from './child.vue'

    const state = reactive(
        num: 721
    )

</script>

//子组件
<template>
    <div>
      <button @click="handleAdd" type="button">添加</button>
    </div>
</template>
<script setup>
    import  defineEmits, defineProps  from 'vue'

    const props = defineProps(
        num: 
            type: Number,
            default: 0,
        ,
    )

    const emits = defineEmits(['update:list'])

    const handleAdd = (val) => 
        emits('update:num', val) //update:固定写法
    
</script>