Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值

您所在的位置：网站首页 › vue父调用子组件方法 › Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值

Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值

2023-11-11 19:34| 来源: 网络整理| 查看: 265

Vue子组件调用父组件的方法_John的WEB前端学习日记的博客-CSDN博客_子组件调用父组件的方法

父组件调用子组件的值和方法

调用值、方法 this.$refs.Child.属性 this.$refs.Child.方法() this.$refs.Child.username this.$refs.Child.getData()

子组件调用父组件的值和方法

this.$parent.属性 this.$parent.方法()

爷组件调用孙组件里面的属性和方法

this.$refs["netheader"].$refs["DatePicker"].属性 this.$refs["netheader"].$refs["DatePicker"].方法()

假设层级太深：this.$parent.$parent.getShopCart() 多加一个 $parent 一般两个够了

子组件调用父组件方法第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件 import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } }; 子组件点击 export default { methods: { childMethod() { this.$parent.fatherMethod(); this.$nextTick(() => {//一般推荐加nextTick和保证组件有渲染不能v-if this.$parent.fatherMethod(); }); } } }; 第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。父组件 import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } }; 子组件点击 export default { methods: { childMethod() { this.$emit('fatherMethod'); } } };

父组件调用子组件

vue父组件中调用子组件的方法 - 雨中愚 - 博客园

通过ref直接调用子组件的方法

//父组件中点击调用子组件方法 import Child from './child'; export default { methods: { handleClick() { this.$refs.child.sing(); }, }, } //子组件中我是子组件 export default { methods: { sing() { console.log('我是子组件的方法'); }, }, };

【本文地址】

Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值

Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值

今日新闻

推荐新闻