利用事件监听模式进行组件通讯

下载vuex：cnpm install vuex@3.6.2 --save

此组件为显示的子组件

src->components->Result.vue

<template>
  <div>result:{{counter}}</div>
</template>

<script>
export default {
    name:"Result",
    props:['counter']
}
</script>

<style>

</style>

src->components->Counter.vue

现在有一个数据，我想在一个子组件中进行数据的显示，在另一个子组件中进行数据的修改

此组件为修改的子组件，使用 $emit 进行事件的发射

<template>
  <div>
    <!-- 递增 -->
    <button class="btn btn-primary" @click="increment">increment</button>
    <!-- 递减 -->
    <button class="btn btn-primary" @click="decrement">decrement</button>
  </div>
</template>

<script>
export default {
    name:"Counter",
    methods:{
        // 在子组件向父组件进行事件的发射
        increment(){
            this.$emit('updated',1);
        },
        decrement(){
            this.$emit('updated',-1);
        }
    }
}
</script>

<style>

</style>

src->App.vue

在父组件使用 $on 进行数据的接收，并更改数据

<template>
 <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6 col-sm-8 col-xs-12">
              <h1>vuex</h1>
              <hr>
              <app-result :counter="counter"></app-result>
              <hr>
              <!-- $event是传递过来的参数，把counter重新赋值 -->
              <app-counter @updated="counter+=$event"></app-counter>
            </div>
        </div>
    </div>
</template>

<script>
import Counter from "@/components/Counter"
import Result from "@/components/Result"
export default {
  name: "App",
  data(){
    return{
      // TODO：现在有一个数据，我想在一个子组件中进行数据的显示，在另一个子组件中进行数据的修改
      counter:0
    }
  },
  components: {
    appCounter: Counter,
    appResult: Result,
  }
};
</script>

<style>

</style>