vue 兄弟组件互相调用方法

落日映苍穹つ 2022-11-06 05:55 143阅读 0赞

描述：  
在父组件里同时引入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>

————————————————  
版权声明：本文为CSDN博主「she-he」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/hujiaojiao525/article/details/89226893