【Vue3系列】 父组件调用子组件的方法-子组件向父组件传值

一:父组件调用子组件的方法

  • 父组件
<template>
    <div>
     父页面
        <son-com ref="sonRef"/>
        <button @click="handleClick">test</button>
    </div>
</template>
<script>
import {defineComponent,ref} from 'vue';

export default defineComponent({
    setup(){
    const sonRef = ref(null);
      const handleClick = () => {
         sonRef.value.song();
      }
  return { sonRef, handleClick, } 
  } 
}) 
</script>
  • 子组件
<template>
   <div>
        子页面
    </div>
</template>

<script>
import {
  defineComponent
} from 'vue';

export default defineComponent({
    setup(){
    const song = () => alert('whos your daddy');
    return { 
      song
    } 
  } 
}) 
</script>
  • 如果是TS呢
如果是TS定义可以使用
const sonRef = ref<null | HTMLElement>(null);

二:子传父

上面我们在父组件里面去调用了子组件的方法,那么执行完了是不是要刷新或者修改父组件里面的某些值呢

vue3中子组件向父组件传值分以下几步

1、定义emits,emits的定义是与component、setup等这些属性是同级。例如
【Vue3系列】 父组件调用子组件的方法-子组件向父组件传值_第1张图片

props: {
      isUpdate: {
        type: Boolean,
        default: false,
      },
      isRadio: {
        type: [Number, String],
        default: 1,
      },
      id: {
        type: [Number, String],
      },
    },
    emits: ['callCancel'],
    setup(props, ctx) {
      const formState = ref({
        virtual_sales_sum: undefined,
        virtual_collect_sum: undefined,
        is_recommend: false,
        is_new: false,
        is_hot: false,
      });

emits此时是作为数组,它也可以接收一个对象

2、方法中使用
在这里插入图片描述

const handleSubmit = async () => {
        const params = {};
        const res = await editGoodsMarketingAttr(params);
        ctx.emit('callCancel', false);
        
        console.log(res);
      };

这里如果没用到setup语法糖,记得return出去

与Vue2的用法不同的是,现在需使用ctx.emit,其中ctx是setup中第二个参数,也就是上下文对象

3、在父组件上定义同名方法接收
【Vue3系列】 父组件调用子组件的方法-子组件向父组件传值_第2张图片
4、父组件接收方法的参数为子组件传递的参数
在这里插入图片描述

你可能感兴趣的:(#,【Vue3从基础到进阶】,javascript,vue.js,typescript,vue3,前端)