vue3.2,父页面调用组件中的数据或方法

创建组件 sub.vue，组件中定义数据 或 方法

<template>
    <div class="root">{{msg}}</div>
</template>

<script setup>
    const fun = (data)=>{
        console.log(data)
    }
    const msg = ref('消息');
   
    //暴露方法给父组件 通过ref.value调用
    defineExpose({ fun,msg })
</script>

页面中，引入组件，调用组件中的数据或方法

<template>
    <a-sub ref="sub"></a-sub>
</template>

<script setup>
    import aSub from "@/components/sub.vue";
    import { ref, onMounted } from "vue";

    const subRef = ref(null);

    //获取组件中的数据
    console.log('组件中的数据',subRef.value.msg)

    //调用组件中的方法
    subRef.value.fun('调用组件中的方法，顺便把父页面的数据传给组件')

    onMounted(() => {
        //改变组件中的数据
        subRef.value.msg = "改造组件中的数据";
    })

</script>

上一篇：vue定义格式化时间戳方法

下一篇：vue3.2，组件中接收来自父组件的数据以及自定义事件