vue3父组件调用子组件的方法

东风vue3���组件调用子组件的方法是通过expose和ref来实现的，我们可以通过expose来控制父组件可以访问子组件那些的方法和对象，我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。

1，组合式API

父组件通过ref定义子组件实例，通过调用实例获得子组件的数据和方法

              点击试一试  import { reactive, ref } from "vue";import child from "./child.vue";//定义子组件实例，名称要和上面的ref相同const childComp = ref(null);//访问demo组件的方法或对象const onTry = () => {  //获取到子组件的 title 数据   let msg = childComp.value.state.title;  //调用子组件的 play方法  childComp.value.play();};

子组件通过defineExpose暴露对象和方法 

      {{ state.title }}  import { ref, reactive } from "vue";//定义一个变量const state = reactive({  title: "www.itxst.com",});//定义一个方法const play = () => {  state.title = "你调用了子组件的方法";};//暴露state和play方法defineExpose({  state,  play,});

2，选项式API

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

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