Vue3父子组件传值

本文基于 script setup 方式

defineProps和defineEmits实现父子组件传值

子组件

<template>
    <div>
        <!-- 方式一 直接调用$emit-->
        <el-button @click="$emit('sonClick', '子组件数据')">子按钮{{msg}}</el-button>
        <!-- 方式二 -->
        <el-button @click="handleGetMsg">子按钮{{msg}}</el-button>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    // defineProps声明props,返回一个对象,其中包含了传递给子组件的所有 props
    defineProps({
        msg: {
            type: String,
            default: ''
        }
    })
    // setup中不能使用$emit
    // 通过 defineEmits 宏来声明需要抛出的事件,返回一个等同于$emit的函数
    const emit = defineEmits(['sonClick'])
    function handleGetMsg() {
        emit("sonClick", "子组件向父组件传送的信息");
    }
</script>

父组件

<template>
    <div>
        <div>son:{{ myname }}</div>
        <son :msg="msg" @sonClick="sonClick"></son>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import son from '@/components/son.vue' // 通过 
                    
                    

你可能感兴趣的:(vue3,javascript,前端)