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

参考文章：
Vue2.0子同级组件之间数据交互

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

（一）父组件给子组件传值，关键字：props

 父组件：

<template>
  <div>
    <h1>父组件</h1>
　　<!-- 引入子组件 -->
    <child :sendMsg="fatherMsg"></child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data() {
    return {
      fatherMsg: '嗨，儿子' // 传递给子组件的值
    }
  }
}
</script>

子组件：通过props拿到父组件传递过来的值

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span> 
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {

    }
  },
  props: ['sendMsg'] // 拿到父组件绑定到sendMsg的值，然后在子组件下显示出来
}
</script>

 

（二）子组件给父组件传值：通过触发事件传递值

以上面的示例代码作为基础修改，子组件：

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span><hr>
    <button @click="sendToFather">子组件给父组件传值</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {
      childMsg: '这是来自子组件的数据'
    }
  },
  props: ['sendMsg'],
  methods: {
    sendToFather: function() {
      this.$emit('getChildValue', this.childMsg); // 参数1 getChildValue作为中间状态，参数2 this.childMsg即为传递给父组件的数据
    }
  }
}
</script>

 

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态，然后通过getChild方法获取子组件传递的数据-->
    <child :sendMsg="fatherMsg" v-on:getChildValue="getChild"></child>
    <span>这是来自子组件的数据：{{childValue}}</span>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data() {
    return {
      fatherMsg: '嗨，儿子',
      childValue: ''
    }
  },
  methods: {
    getChild: function(data) { // 此时的参数data为子组件传递的值，即this.$emit()的第二个参数
      this.childValue = data;
    }
  }
}
</script>

 

（三）同级组件传递数据

对于同级组件传值用的较多的情况，推荐直接使用vuex进行状态管理会比较方便。

 

补充：面试被问到同级组件传递参数，平时很少去用这个，没答上来（尴尬），回来百度了下，原来就是通过一个中间桥接的方式进行传递（遭不住，之前看到过，没引起重视）

其原理是先建立一个中间事件总线center.js，放在tools文件夹下，如下：

import Vue from 'vue'

export default new Vue()

center.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线

然后创建第一个子组件first.vue：

<template>
  <div class="first-vue-box">
    <p>this is firstChild vue</p>
    <button @click="sendMsg">发送</button>
  </div>
</template>
<script>
import bridge from '../tools/center'
export default {
  data () {
    return {}
  },
  methods: {
    sendMsg () {
      bridge.$emit('firstChildMsg', 'this is firstChild Msg')
    }
  }
}
</script>
<style lang="scss" scoped>
.first-vue-box {
  border: 1px solid blue;
}
</style>

这里先引入事件总线，通过事件总线点击按钮后将first.vue的信息通过事件firstChildMsg的形式发布出去了（我个人的理解是相当于通过事件总线，将first.vue的firstChildMsg这个事件暴露出去），用法跟子组件向父组件传参的模式一样

 

然后再创建第二个组件second.vue：

<template>
  <div class="second-child">
    <h4>this is second child vue</h4>
    <p>从first.vue获取同级组件传递过来的信息：{{message}}</p>
  </div>
</template>
<script>
import bridge from '../tools/center'
export default {
  data () {
    return {
      message: '默认值'
    }
  },
  mounted () {
    let _this = this
    bridge.$on('firstChildMsg', function (msg) {
      _this.message = msg
    })
  }
}
</script>

在second.vue中再引入事件总线，然后通过$on(functionName, callback)监听first.vue暴露出来的firstChildMsg事件，通过回调函数获取first.vue传递出来的值（我个人是这么理解的） 

 

引入两个子组件：

<template>
  <div class="detail-div">
    <h3>首页详情</h3>
    <first-child></first-child>
    <second-child></second-child>
  </div>
</template>
<script>
import firstChild from './first'
import secondChild from './second'
export default {
  data () {
    return {}
  },
  components: {
    firstChild,
    secondChild
  },
  mounted () {
    // console.log('详情页面...')
  }
}
</script>

 

第二个子组件通过中央事件总线bridge，监听事件first.vue发布的事件firstChildMsg，获取到子组件first.vue发送过来的信息，如下图所示：

点击发送按钮后second.vue获取到first.vue传递过来的值：

 

　　之前在项目中没这样用过同级组件之间的传值，这次是个教训，以后得注意一下每一个细节的地方。这里我看了参考文章，自己写个示例来验证的，最好是能自己验证一下，记忆才比较深刻。