vue组件传值问题, [ 相对于框架而言 ] , 发现官网都是相对于引入vue文件的说明文档, 其实大同小异

1. 父子组件传值

这个是最简单的,比如说, app.vue ( 一般默认是最大的组件 ) 组件中data中的数据,需要传递给子组件

component-a

使用

// app.vue 中template中的引入的组件a的内容
<component-a :msg1="msg1"></component-a>

// app.vue 组件中的data中的数据 
 data: function() {
    return {
      msg1: 'hello msg1------------'
    }
  }

使用 :msg1 = 'msg1'   的形式, 在a组件的根组件标签中获取到app.vue组件中的内容

在组件a的vue文件中,使用props接收传递过来的参数,并且初始化为data中的数据

  data: function() {
    return {
      msg11: this.msg1
    }
  },
  props: ['msg1']

最后,在组件a中就能直接使用了

  <div>
    <p>子组件a的内容</p>
    <p>------------------------------------</p>
    <p>{{msg11}}</p>
  </div>

==================================================================

2. 子组件向父组件传值

在子组件的data中初始数据

  data: function() {
    return {
      msg2: '这是子组件a的内容'
    }
  }

在子组件中添加一个按钮触发事件

<button @click="$emit('add', msg2)">子组件中的按钮</button>

核心, 使用this.$emit ' 注册 ' 自定义事件, 事件名称叫add, 携带的参数为 msg2

在父组件中使用子组件的标签中

<component-a @add="add" :msg1="msg1"></component-a>

把上面的 ' 自定义事件 ' 也就是 add 当成正规事件,进行事件绑定 

在父组件的事件处理中添加 add 对应的函数

  methods: {
    add(e) {
      this.msg2 = e
    }
  }

初始为父组件data中的初始数据,在页面中使用就能看到结果

    <p>组件a传递过来的数据是------------{{msg2}}</p>

==================================================================

3. 兄弟组件传值

兄弟组件传值相对而言复杂一丢丢,所以写的详细点

原理: 利用vue创建一个新的实例,假如说叫   eventBus , 通过 eventBus .$emit()  注册事件, 通过 eventBus.$on()  进行事件监听

父组件内容,其他的都是默认的

  <div>
    <component-a></component-a>
    <p>----------华丽的分隔符------------</p>
    <component-b></component-b>
  </div>

子组件a中的内容, 通过标签触发事件 

<button @click="a_btn">组件a中的按钮</button>

子组件a的methods中的事件, 通过事件中心点emit的方式触发一个名叫  event-b 的事件 , 并且携带 子组件 a 中. data中的数据  msg3

  methods: {
    a_btn() {
      eventBus.$emit('event-b', this.msg3)
    }
  }

在子组件 b 中

  created() {
    eventBus.$on('event-b', function(e) {
      console.log(e)
    })
  }

直接在created中监听 event-b事件   ( 事件其实应该写在methods中, 在created中调用 ) 

就能直接打印出组件a中传递过来的值

1. 受单向数据流影响, 接收到的别的组件传递过来的参数, 建议在data中初始化为当前组件的数据

2. 凡是组件通过传值接收到的参数 , 都不建议直接修改 (好像也不会报错...)

 

补充一下我在eventBus中的做的事情

 

import Vue from 'vue'

export default new Vue()

 

在网上看到很多不同的版本, 需要说的是, 我  <== 在vue框架中使用的使用, 导出需要加括号,也就是 new Vue()  这个括号 , 在网上也看到很多人不加就能用, 具体加不加,自己试试就知道了