Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）

 一。父向子传值props

父组件向子组件传值： 
parent：

<parent>
    <child :message="msg"></child>  //父组件发送
</parent>

data(){
    return {
        msg: "this is parent message"
    }
}

child：

<div>
    <p>{{message}}</p>
</div>

data(){
    props:["message"]      //子组件进行接收
    }

or

props: {
    message: {
        type: String,                 //可指定接收类型，如:Array.
        default:"this is default"     //可设置默认值
    }
}

props: {
    message: {
        type: Array,
        default: ['foo','bar','baz']   //默认值
    }
}

父组件：：message="msg" 向子组件发送

子组件：props:[‘message’] 接收

注意：若父组件中没有用v-bind，子组件中接收的是mes字符串，
 

其中props对象写法中可以定义属性 ：

type.    default    required  三个属性

props:{

message:{
  
type:Number/String/Array......     //定义接收值的类型

default:0                           //定义默认值 

required:true/false            v //定义必填项，不填将报错，那怕有默认值也报错


｝

｝

二。子向父传值 （自定义事件）

父组件：this.$emit()进行发送

子组件：自定义事件进行接收

三，兄弟组件之间的通信

 步骤：1.创建eventBus.js,并共享一个Vue实例

 

            2.发送方：向导入eventBus.js,调用bus.$emit()

             3.接收方：向导入eventBus.js,调用bus.$on()

注意：如果 $on 多次触发，解决办法就是在 beforeDestroy 或 destroy 中将事件销毁，使用 $off()。

	beforeDestroy () {
      bus.$off('pass')
    },

 还有一种办法是：子->父->子

Vue高频面试题 生命周期函数详解

Vue知识点总结