vue组件传值（父传子、子传父、兄弟传值）

vue组件传值

1、父传子：

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

• 父组件给子组件动态绑定属性

// 父组件
<user-detail :myName="name" />
    
export default {
    components: {
        UserDetail
    }
    ......
}

• 子组件通过props属性接收

// 子组件
export default {
    props: ['myName']
}

• props是组件实例的一个属性，代表的是接收到的数据
• props的值可以是数组也可以是对象
  a）、数组形式：
  props:[‘title’,‘likes’,‘isPublished’,‘commentIds’,‘author’]
  b)、对象形式（需要进行校验的时候，别人给的东西不能无脑要，）

    Vue.componentb('my-component',{
       props:{
         //基础的类型检查（'null'和‘undefined’会通过任何类型验证）
         //多个可能的类型
         propA:Number,
         propB:[String,Number],
         //必填的字符串
         propC:{
              type:String,
              required:true
          },
         //带有默认值的数字
         poropD:{
              tyoe:Number,
              default:100
         }
       }
    })

2、子传父：

子组件绑定一个事件，通过 this.$emit() 来触发

1. 在子组件中绑定一个事件，并给这个事件定义一个函数

// 子组件
<button @click="changeParentName">改变父组件的name</button>
​
export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

2. 在父组件中定义并绑定 handleChange 事件

// 父组件
<child @handleChange="changeName"></child>
​
methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

3.兄弟组件之间传值

1. 还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
</script>

// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
</script>

当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

总结

父子通信： 父向子传递数据是通过 props；

子向父是通过 $emit；

兄弟通信： EventBus；Vuex；

跨级通信： EventBus；Vuex；

EventBus

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

EventBus的使用

项目中创建一个js文件，在两个需要通信的两个组件中分别引入这个js，传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据，被传递数据的组件内通过vue实例方法$on监听到事件和接受到数据。