Vue兄弟组件之间相互调用方法
Vue兄弟组件之间相互调用方法
·
描述: 在父组件里同时引入2个子组件(child1
,child2
),在child2
里想调用child1
组件里的某个方法。
实现方式:
在child2
里用this.$emit('fun')
传到父组件里
在父组件里,给child1
组件加上ref="child1Container"
属性
在methods
里定义fun
方法(this.$refs.child1Container.某个方法()
)
父组件
// 父组件
<template>
<child1 ref="child1Container"></child1>
<child2 @save="save"></child2>
</template>
<script>
import Header from './components/child1';
import SubRoute from './components/child2';
export default {
name: 'App',
components: {
child1,
child2
},
methods: {
save(){
this.$refs.child1Container.aaa();
}
}
}
</script>
子组件1
// 子组件1
<template>
<div>我是子组件11111</div>
<div @click="aaa"></div>
</template>
<script>
export default {
name: 'App',
methods: {
aaa(){
console.log('我是子组件1里面的方法");
}
}
}
</script>
子组件2
<template>
<div>我是子组件22222</div>
<div @click="save"></div>
</template>
<script>
export default {
name: 'App',
methods: {
save(){
this.$emit('save');
}
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)