import Child from './components/child.vue';
	const handle = () => {
		console.log('子组件调用了父组件的方法')
	}

我是子组件调用父组件的方法

	const emit = defineEmits(["sayHello"])
	const sayHello = () => {
		emit('Hello World')
	}

我是子组件

// 第一步：定义子组件的方法
const sayHello = (value) => {
	console.log(value)
}
// 第二部：暴露方法
defineExpose({
	sayHello 
})

触发子组件方法
	
import Child from './components/child.vue'
// 定义与 ref 同名变量
const childRef = ref(null)
const getChild = () => {
	// 调用子组件的方法或者变量，通过value
	childRef.value.hello("hello world！");
}

 

    
    点击试一试
  

import child from "./child.vue";
export default {
  name: "app",
  //注册组件
  components: {
    child,
  },
  methods: {
    onClick: function () {
      //获取到 子组件的  数据
      let msg = this.$refs.childComp.title;
      //执行了子组件的 play方法
      this.$refs.childComp.play();
    },
  },
};

 

    {{ title }}
  

//选项式默认当前实例是全部暴露
export default {
  name: "demo",
  //默认全部暴露 也可以通过expose控制那些需要暴露
  //expose: ['play'],
  data() {
    return {
      title: "www.itxst.com",
    };
  },
  methods: {
    play: function () {
      this.title = "你调用了子组件的方法";
    },
  },
};