VUE兄弟组件相互调用方法

2019-11-18  本文已影响0人  可有瑞奥色提

描述:

    在父组件中有两个组件将其称为兄弟组件,分别为child1、child2。希望能够在child1中调用child2中的某个方法。

过程:

    1.在child1中用this.$emit('fun')将请求发送到夫组件中

    2.在父组件中给child2加上ref="childContainer"属性

    3.在methods里定义fun方法(this.$refs.child1Container.某个方法())

代码:

```

// 父组件

<template>

    <child1 @save="save"></child1>

    <child2 ref="child2Container"></child2>

</template>

<script>

    import Header from './components/child1';

    import SubRoute from './components/child2';

    export default {

        name: 'App',

        components: {

            child1,

            child2

        },

        methods: {

            save(){

                this.$refs.child2Container.aaa();

            }

        }

    }

</script>

// 子组件1

<template>

    <div>我是子组件1</div>

    <div @click="save"></div>

</template>

<script>

    export default {

        name: 'App',

        methods: {

            save(){

                this.$emit('save');

            }

        }

    }

</script>

// 子组件2

<template>

    <div>我是子组件2</div>

    <div @click="aaa"></div>

</template>

<script>

    export default {

        name: 'App',

        methods: {

            aaa(){

                console.log('我是子组件2里面的方法");

            }

        }

    }

</script>

```

上一篇 下一篇

猜你喜欢

热点阅读