通过路由带参数进行传值

两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）。

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

在B组件中获取A组件传递过来的参数。

this.$route.query.orderId

父子组件之间的传值

父组件往子组件传值props

• 定义父组件，父组件传递number这个数值给子组件，如果传递的参数很多，推荐使用json数组{ }的形式。
• 子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。
• 子组件往父组件传值，通过emit事件。

<!-- parent.vue --><template>  <div class="parent">    <child @toParent="toChild" :number="number"></child>  </div></template><script>import child from './child.vue'export default {  data () {    return {      number: 666    }  },  components: {    child  },  methods: {    toChild (data) {      this.number = data    }  }}</script>

父子组件传值，数据是异步请求，有可能数据渲染时报错。原因：异步请求时，数据还没有获取到但是此时已经渲染节点了。可以在 父组件需要传递数据的节点加上v-if = false，异步请求获取数据后，v-if = true。

<!-- child.vue --><template>  <div class="child">    <p @click="toParent">{{ number }}</p>  </div></template><script>export default {  props: ['number'],  methods: {    toParent () {      this.emit('toChild', '888')    }  }}</script>

eventBus

发布者通过eventBus发布事件，订阅者通过eventBus订阅事件。当发布者发布事件时，订阅该事件的订阅者的事件处理方法将被调用。

在src目录下创建eventBus.js文件。

import Vue from 'vue' const eventBus = new Vue() export { eventBus }

A组件中通过触发事件或者其他什么，然后发射数据。

this.$emit('key','data-1232131232132131232')

B组件中接收A组件的数据。

this.$on('key',function(params){    console.log(params);  // data-1232131232132131232})

vuex

安装 Vuex之后，让我们来创建一个 store。创建过程直截了当。仅需要提供一个初始 state对象和一些mutation：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  }})

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment')console.log(store.state.count) // -> 1

再次强调，我们通过提交mutation的方式，而非直接改变 store.state.count。

单一状态树

每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

在 Vue 组件中获得 Vuex 状态

Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

const app = new Vue({  el: '#app',  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件  store,  components: { Counter },  template: `    <div class="app">      <counter></counter>    </div>  `})

通过在根实例中注册store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：

const Counter = {  template: `<div>{{ count }}</div>`,  computed: {    count () {      return this.$store.state.count    }  }}

原著是一个有趣的人,若有侵权,请通知删除