vue——父子组件互调用方法方法

最新推荐文章于 2025-07-11 17:56:16 发布

肖ZE

最新推荐文章于 2025-07-11 17:56:16 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/lucky541788/article/details/89289399

vue 专栏收录该内容

74 篇文章

订阅专栏

本文探讨了Vue中父子组件如何互相调用方法，包括子组件如何触发父组件的方法及父组件如何调用子组件的方法，详细介绍了相关API和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件：

food.vue

<div class="food" v-show="showFlag">food</div>

export default {
    name: 'food',
    data () {
      return {
        showFlag: false
      }
    },
    methods: {
      show () {
        this.showFlag = true
      }
    },
    created() {
    	// 子组件调用父组件方法
    	this.$parent.fun() // 123123
    }
}

父组件

<food ref="food"></food>

export default {
    name: 'food',
    data () {
      return {
        showFlag: false
      }
    },
    methods: {
		selectFood () {
        	this.$refs.food.show() // 父组件点击，调控子组件的显示与否
    	},
    	fun () {
    		console.log(123123)
		}
    }
}