vue2组件传值

一、父组件向子组件传值

父组件中的数据在子组件中不能直接使用，要想在子组件中使用，步骤：
1、 在子组件配置props属性，属性中协商自定义属性名。

{

props：[’自定义属性名‘]

}
2、 在父组件中找到子组件标签。

<子组件标签  ：自定义属性名="父组件要发送的数据"></子组件标签>
3、 在子组件中需要使用数据的地方，直接将第一步中自定义属性名当作data数据来使用。

<div>{{自定义属性名}}</div>

示例：

子组件：

---

 父组件：

 二、子组件向父组件传值

步骤：

1、在需要发送数据的子组件标签上绑定自定义事件，使用this.$emit()发送数据。

<div @click="自定义事件名1"></div>

methods:{

自定义方法名1（）{

this.$emit（"自定义时间名2",要发送的数据)

}

}

如果需要发送多个数据，

this.$emit（"自定义时间名2",[要发送的数据1,要发送的数据1])

2、在父组件中找到子组件标签

<子组件标签名 @自定义事件名2=“新的方法名”></子组件标签名>

methods:{

新的方法名（data）{

console.log(data）//data就是子组件发送过来的数据

}

}

三、非父子组件传值

1、通过建立一个第三方bus来做中转站，然后借用$emit 发送参数和 $on 来接受参数
建立一个bus.js

import Vue from 'vue'
export default Vue.prototype.bus = new Vue()

2、在main.js引入

import bus from './util/bus'

3、//发送信息组件
<template>
  <button @click="changeBus()">bus</button>  
</template>
...
methods: {
    changeBus(){
      this.bus.$emit("change",'yjw');
    }
}
//接受信息组件
 mounted(){
    let self = this;
    this.bus.$on('change',function(msg){
      console.log(msg);
      self.msg = msg;
    })
  }