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

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

1，组合式API

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

<!-- 父组件 app.vue --><template>  <div class="itxst">    <!-- 使用 ref  指令关联子组件 -->    <child ref="childComp"/>    <button @click="onTry">点击试一试</button>  </div></template><script setup>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();};</script>

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

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

2，选项式API

<!-- 父组件 app.vue --><template>  <div class="itxst">    <!-- 使用 ref  命令 -->    <child ref="childComp"/>    <button @click="onClick">点击试一试</button>  </div></template><script >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();    },  },};</script> 

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

本文链接：https://www.kjpai.cn/news/2024-03-27/149617.html，文章来源：网络cs，作者：往北，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！