美文网首页
VUE兄弟组件相互调用方法

VUE兄弟组件相互调用方法

作者: 可有瑞奥色提 | 来源:发表于2019-11-18 19:52 被阅读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>

```

相关文章

  • VUE兄弟组件相互调用方法

    描述: 在父组件中有两个组件将其称为兄弟组件,分别为child1、child2。希望能够在child1中调用c...

  • vue.js 核心知识点三

    目录 - 3.1 vue中子组件调用父组件的方法 - 3.2 Vue父组件调用子组件的方法 - 3.3 涉及到组件...

  • VUE中子组件调用兄弟组件方法

    开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教 父组件...

  • vue使用ref调用子组件方法,数据问题

    问题:在vue父子组件传值过程中,使用ref去调用子组件方法,没有在子组件中使用watch监听来调用调用子组件方法...

  • 父组件如何调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法; 方案二:通过组件的on方法;

  • VUE组件传参

    一、父组件给子组件传参方法 二、子组件调用父组件方法 三、不同组件相互触发方法

  • 关于$on的用法

    $on 兄弟组件之间相互传递数据 示例 父组件 $onFa.vue 创建一个vue的空白实例 emptyVue.j...

  • vue.js 兄弟组件传值

    vue兄弟组件如何传值?兄弟组件如何相互操作组件里面的函数? 1、兄弟之间传递数据需要借助于事件车,通过事件车的方...

  • vue 父组件调用子组件的方法

    父组件可以通过this.$refs调用子组件的方法 父级.vue 子级 child.vue

  • vue3 常用watch及defineExpose

    vue3 watch监听的两张方法 vue3 父组件调用子组件实例

网友评论

      本文标题:VUE兄弟组件相互调用方法

      本文链接:https://www.haomeiwen.com/subject/nhobictx.html