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

父组件是不能直接访问子组件的方法。需要子组件手动的抛出才行。

setup写法

// 父组件
<template>
    <div>
        <h1>父组件</h1>
        <a-button type="primary" @click="create">调用子组件</a-button>
        <Operate ref="operateRef" @childClick="childClick" msg="hello"></Operate>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import Operate from './operate.vue';

 export default defineComponent({
  components: {
      Operate
  },
  setup() {
  // 创建子组件的引用
      const operateRef = ref(null)
     const create = ()=>{
          // 子组件导出的是一个函数，所以直接调用value
        operateRef.value().showCreate();
     }
     const childClick = (e)=>{
        console.log('子组件传递的方法')
    }
    
  // 导出方法
    return {
      child,
      handleClick
    }
  }
});
</script>


// 子组件
<template>
    <h1>子组件</h1>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  emits: [
    'child-click'
  ],
  props: {
    msg: String
  },
    
  setup(props, context) {
      // 向父组件传事件
    const handleClick = () => {
      context.emit('child-click', context)
    }
    
    // 父组件调用子组件的事件
    const childMethod = () =>{
        console.log("子组件的事件被触发了",msg)
    }
    
    return {
      props,
      handleClick,
      childMethod
    }
  },
}}
</script>

＜script setup＞语法糖写法

父组件

<template>
    <div>
        <h1>父组件</h1>
        <a-button type="primary" @click="create">调用子组件</a-button>
        <Operate ref="operateRef" @childClick="childClick"></Operate>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Operate from './operate.vue';

// 创建子组件的引用
const operateRef = ref();

// 调用子组件的方法
const create = () => {
    // 子组件导出的是一个函数，所以直接调用value
    operateRef.value().showCreate();
};

// 监听子组件传递的方法
const childClick = (e: any) => {
    console.log('子组件传递的方法', e)
};
 
</script>

子组件

<template>
    <h1>子组件</h1>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
 // 定义上报事件
const emit = defineEmits(['childClick']);
const showCreate = () => {
    console.log("Child components");
    // 传递给父组件
    emit('childClick', "Child components");
};
    
 // 重点！！！一定要导出不然会报错
 // 注意这里导出的是函数，父组件的value就是函数，
 // 如果是对象父组件的value就是对象
defineExpose(() => ({
    showCreate,
}))

</script>

<script lang="ts">
export default {
    name: 'Operate',
};
</script>