组件间的通信

一、父组件往子传值

// 父组件
<template>
  <div>
    <children post-title="obj"></children>
  </div>
</template>
<script>
export default {
  data(){
    return {
      obj:{name:'haolucky', age:18}
    }
  }
}
</script>
// 子组件
<template>
    <div class="children">
      我是{{postTitle.name}}，今年{{postTitle.age}}岁了
  </div>
</template>
<script>
export default {
  props: ['postTitle']
// props: {
// postTitle: Object
// }
}
</script>

父子组件传值，异步请求有可能渲染时报错
异步请求时，数据还没有获取到但是此时已经渲染节点了。应该在父组件传递数据的节点上加v-if ，数据成功后再显示。

二、子组件往父组件传值

// 子组件
<template>
  <div class="children">
    <button @click="emitToparent"></button>
  </div>
</template>
<script>
export default {
  methods:{
    emitToParent(){
      this.$emit('child-event', '需要传递的内容')
    }
  }
}
</script>
// 父组件
<template>
  <div>
    <children child-event="parentEvent"></children>
  </div>
</template>
<script>
export default {
  methods: {
    parentEvent(data){
      // do something...
    }
  }
}
</script>

三、不同组件之间传值，通过eventBus

// 定义一个新的vue实例专门用于传递数据，并导出
import Vue from 'vue'
export default new Vue()

// 组件传值

<template>
  <div>
    <button @click="emitToB"></button>
  </div>
</template>
<script>
import eventBus from 'common/eventBus.js'
export default {
  methods: {
    emitToB(){
      eventBus.$emit('eventFromA', '需要传递的值')
    }
  }
}
</script>

// 另外一个组件接受

<template>
  <div>
    <button @click="emitToB"></button>
  </div>
</template>
<script>
import eventBus from 'common/eventBus.js'
export default {
  methods: {
    getEventData(){
      const that = this;
      eventBus.$on('eventFromA',function(data ){
          that.data = data 
        // do something...
      })
    }
  }
}
</script>

四、vuex状态管理

vuex主要是是做数据交互，来维护共有的状态或数据

五、[provide / inject] 只要在上一层级的声明的provide，那么下一层级无论多深都能够通过inject来访问到provide的数据，用法与props完全相同

1.provide就相当于加强版父组件prop
2.inject就相当于加强版子组件的props

<template>
    <div class="test">
      <son prop="data"></son>
  </div>
</template>
<script>
export default {
  name: 'one',
    provide: {
      name: 'haolucky'
    }
}
</script>
// 儿子、孙子...都可以
<template>
  <div>
    {{name}}
   </div>
</template>
<script>
export default {
    name: 'two',
    inject: [name]
}
</script>

六、通过路由带参数进行传值

通过点击事件或者钩子函数触发路由跳转

// 跳转详情页面时，把id带过去
this.$router.push({path: '/detail', query: {id: 1}}) 

获取传递过来的参数

// 在created 钩子中就可以拿到，发起请求相关数据详情
this.$route.query.id

七、通过设置Session Storage缓存的形式进行传递

const params = { id: 1}
sessionStorage.setItem('缓存名称', JSON.stringify(params))

转载于:https://www.jianshu.com/p/f57f9b61f135