vue组件之子组件向父组件传值完成数量控制器

本章作业——利用父子组件的传值完成数量控制器的功能

需求：

• 单击“增加1”按钮的时候，对应数量会增加1。
• 单击“减少1”按钮的时候，对应数量会减少1。

项目运行的页面效果如图所示：

实现过程：

父组件示例代码（App.vue)：

<template>
  <div id="app">
    <p>{{total}}</p>
    <!-- 第三步：调用组件 -->
    <Counter @father_add="getTotal" @father_reduce="getTotal"></Counter>

  </div>
</template>

<script>
// 第一步：引入子组件Counter
import Counter from './components/Counter.vue'

export default {
  name: 'App',
  data(){
    return{
      total:0
    }
  },
  methods:{
    getTotal(val){
      this.total=val
    }

  },
  // 第二步：注册组件
  components:{Counter} 
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件使用$emit方法向父组件传递数据，子组件列表项目代码（Counter.vue）: 

语法：this.$emit('event',val)

<template>
  <div>
     <button @click="add()">增加1</button>
     <button @click="reduce()">减少1</button>
  </div>
</template>

<script>
export default {
    name:'Counter',
    data(){
        return{
           sum:0
        }
    },
    methods:{
        add(){
         this.sum=this.sum+1;
         this.$emit("father_add",this.sum);
        },
        reduce(){
        this.sum=this.sum-1;
        this.$emit("father_reduce",this.sum)
        }

    }

}
</script>

注意：子组件传值给父组件的时候，事件触发及接收的原则是：谁触发的监听谁接收。