vue之间的组件传值问题

152 阅读1分钟

1,父到子

    父组件A
    <A :msg='msg'></A>
    子组件B
    <B>{{msg}}</B>
    props:['msg']
    简单来说就是父组件定义一个属性,并且给到对应的值,子组件通过prop拿到这个属
    性之后直接使用

2.子到父

    子组件A
    <A @click='chufa'></A>
    methods:{
        chufa(){
            this.$emit('hehe','子组件需要传给父组件的值')
        }
    }
    父组件B
    <B @hehe='haha'></B>
    methods:{
        haha(arg){
            console.log(arg,'拿到了子组件传过来的值')
        }
    }
    简单的来说就是父组件直接注册一个方法,子组件此时用this.$emit()来触发父组
    件注册的方法,并且放入自己要传入的值,此时父组件即可拿到需要的值

3.兄弟组件传值

    兄弟组件传值方法可以用父组件中转,也可以用中央事件总线Bus,Bus的原理简单来
    说就是申明一个vue实例,用它来传递信息,可以创建一个bus.js文件,内容如下:
    import Vue from "vue";
    let Bus = new Vue();
    export default Bus;
    然后在兄弟组件A还有B中都导入bus.js。
    此时如果是组件A需要传递信息给组件B
    那么在组件B中申明一个方法this.$on('chuandi',(arg) => {console.log(arg,'拿到了')})
    A组件this.$emit('chuandi','需要传递的值'),触发B组件注册的方法,并且把值传
    递过去即可,此时A通过回调拿到传递的值