父组件调用子组件的方法-子组件向父组件传值

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

• 父组件

<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等这些属性是同级。例如

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、在父组件上定义同名方法接收

4、父组件接收方法的参数为子组件传递的参数