vue2.0中父子，兄弟组件的传值2

问题描述：在父组件a中有b,c两个子组件，b组件想使用c组件的dom元素

解决方法：通过其父组件进行传值

1、在c组件中使用this.$emit方法将event.target传给父组件a

c子组件代码

<template>
<div class=“car” @click="addcar"></div>
</template>

methods: {
    addcar(event) {
        this.$emit('addCart',event.target);//触发addCart方法，event.target为向父组件传递的数据
    }
}
复制代码

2、在父组件a中监听子组件触发的addCart事件,然后调用addcart方法,再使用this.$refs来引用子组件b，进而调用其drop方法。

父组件a代码

<div>
<c @addCart="addcart"></c>//监听子组件触发的addCart事件,然后调用addcart方法
<b ref="b"></b>
</div>

methods: {
    addcart(target) {
        this._drop(target);
    },
    _drop(target) {
        this.$refs.b.drop(target);//调用子组件b中的drop方法
    }
}
复制代码

3、在子组件中定义一个drop方法使用target

子组件b的代码

methods: {
    drop(el) {
    //此el就是c组件中的dom元素div
        console.log(el);
    }
}
复制代码

最后就能在子组件c中使用target

转载于:https://juejin.im/post/5acada6cf265da2386702e3d