JZTXT

vuejs3.0 从入门到精通——组件—子传父

发布时间 2023-11-03 11:41:35作者: 左扬

子传父

1、子

<template>
    <div>
        这是子组件 ==> {{ num }}
        <button @click='changeNum'>按钮</button>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
    setup(_, { emit }) {
        let num = ref(100);
        const changeNum = () => {
            emit('fn', num.value);
        }
        return {
            num,
            changeNum
        }
    }
});
</script>

2、父

<template>
    <div>
        <child-component @fn="handleFn"></child-component>
    </div>
</template>


<script lang="ts">
import ChildComponent from '@/components/List.vue'
export default {
    components: {
        ChildComponent
    },
    methods: {
        handleFn(payload: number) {
            console.log('Received payload:', payload);
        }
    }
}
</script>