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

setup写法

// 父组件
<template>
  <div>
    <h2>我是父组件!</h2>
    <button @click="handleClick">调用子组件的方法</button>
    <Child ref="child" @childClick="childClick"/>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'
 
export default defineComponent({
  components: {
      Child
  },
  setup() {
  	// 获取子组件
  	const child = ref(null)
 	const handleClick = ()=>{
 		// 调用子组件的方法
 		child.value.childMethod()
 	}
 	const childClick = (e)=>{
		console.log('子组件传递的方法')
	}
    return {
      child,
      handleClick
    }
  }
});
</script>

// 子组件
<template>
  <div>
    <h2>我是子组件!</h2>
  </div>
</template>

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("子组件的事件被触发了")
	}
 
    return {
      props,
      handleClick,
      childMethod
    }
  },
})

＜script setup＞语法糖写法

// 父组件
<template>
	<button @click="fun">调用子组件的方法</button>
	<child ref="childRef"></child>
</template>
<script setup>
import { ref } from "vue";
// 引入子组件
import child from "./child.vue";
// 获取子组件
const childRef = ref(null);
const fun = () => {
	childRef.value.childFun();// 调用子组件的方法
}
</script >


// 子组件
<script setup>
import { defineExpose } from 'vue'
const childFun = () => {
	console.log('我是子组件方法')
}
// **重点！！这里需要使用defineExpose暴露出去**
defineExpose({
	childFun
})
</script>