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 = "你调用了子组件的方法"; }, }, };
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...