vue 兄弟组件互相调用方法
描述:在父组件里同时引入2个子组件(child1,child2),在child2里想调用child1组件里的某个方法。实现方式:在child2里用this.$emit('fun')传到父组件里在父组件里,给child1组件加上ref="child1Container"属性在methods里定义fun方法(this.$refs.child1Container.某个方法())...
·
描述:
在父组件里同时引入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
<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>
更多推荐
已为社区贡献2条内容
所有评论(0)