美文网首页
vue3 setup语法子组件如何与父组件通信

vue3 setup语法子组件如何与父组件通信

作者: 回不去的那些时光 | 来源:发表于2023-04-01 16:40 被阅读0次

    子类获取父类的属性和方法

    vue3 的setup中,子组件中接收数据需要用到 defineProps;向父组件提交事件,需要用 defineEmits

    //父组件
    <template>
     <GuideMask 
      :sum="sum"  // 传递值     
      @add="add" // 传递方法
     />
    </template>
    
    <script lang="ts" setup>
    import { ref } from "vue";
    import GuideMask from "@/components/GuideMask.vue";
    
    const sum = ref(1);
    const add=(val)=>{
        sum.value = sum.value + val;
    }
    </script>
    
    //子组件
    <template>
      <button @click="handleAdd">改变page值:{{sum}}</button>
    </template>
    
    <script lang="ts" setup>
    defineProps(["sum"]);//接收父组件传来的值
    const emit = defineEmits(["pageFn"]); //定义一个变量来接收父组件传来的方法
    
    const handleAdd = () => {
      emit("add", 2);
    }
    </script>
    

    父类获取子类的属性和方法

    vue3 的setup中,父类想要调用子类的数据需要先获取子类的 ref;当然光这样还是不够的,还需要用 defineExpose 在子类中对外进行暴露可以被外部获取的属性和方法。

    //父组件
    <template>
     <ChildCom ref="childComRef" />
     <button @click="handle">点击</button>
    </template>
    
    <script lang="ts" setup>
    import { ref } from "vue";
    import ChildCom from "@/components/ChildCom.vue";
    
    const childComRef = ref(null);
    
    const handle = () => {
        const num = childComRef.value.num;
        childComRef.value.handleAdd();
    }
    </script>
    
    //子组件
    <template>
      <div>我是子组件</div>
    </template>
    
    <script lang="ts" setup>
    import { ref } from "vue";
    
    const num = ref(1);
    
    const handleAdd = () => {
      num.value++;
    }
    
    defineExpose({ num, handleAdd });  // 把组件中的属性和方法对外暴露
    </script>
    

    相关文章

      网友评论

          本文标题:vue3 setup语法子组件如何与父组件通信

          本文链接:https://www.haomeiwen.com/subject/kldhddtx.html