一、父子组件传值

//父组件
<template>
  <div>
    <div><span>{{msa}}</span></div>
    <goodsnumber  :count="counts"  @headback="headback"></goodsnumber>
  </div>
</template>

<script>
import goodsnumber from './goodsnumber'
export default {
  name: 'goods',
  components: {'goodsnumber': goodsnumber},
  data () {
    return {
      counts : 1,
      msa: 1
    }
  },
  methods: {
    headback (msa) {
      this.msa = msa
    }
  }
}
</script>

<style scoped>

</style>

//子组件
<template>
  <div>
    <a class="btn" @click="recount(false)" href="#">-</a>
    <input class="counts" type="number" value="this.counts" v-model="this.counts">
    <a class="btn" @click="recount(true)" href="#">+</a>
  </div>
</template>

<script>
export default {
  name: 'goodsnumber',
  props: {
    count: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      counts: this.count
    }
  },
  methods: {
    recount (path) {
      if (path === true) {
        this.counts++
      } else {
        this.counts--
      }
      this.$emit('headback', this.counts)
    }
  }
}
</script>

<style scoped>
.btn{
  text-decoration: none;
  height:17px;
  width:17px;
  float:left;
  margin: 5px;
}
.counts{
  width:25px;
  float:left;
  margin: 5px;
}
</style>

父组件通过给引用的子组件模板绑定参数来传参:count=“counts”，子组件通过props接受父组件传递过来的数据，简单的父传子完成。

子组件通过给事件设置

this.$emit(‘headback’, this.counts)

发布事件’headback’以及需要传递的参数 this.counts，在父组件通过@headback=“headback”，来接受子组件$emit的事件以及参数，此时在父组件定义该事件并接受参数headback (msa) {this.msa = msa}，接受数据完成。

二、组件传值策略

可以看得出，父子组件传值基于，一个父传子，直接传递参数，如果你直接修改了这个参数，vue会警告你最好不要修改父组件传递过来的参数，父组件中可能同一个子组件多次，如果修改了这个参数，所有的子组件都会同步更新。

子传父，通过事件触发，然后传参。在import子组件时，不能直接调用子组件数据，看起来是引入了子组件，其实在vue中引入的都是模板，并实例化的某一个模块，子组件可以在同一个父组件都多次复用，所以每个被引用的子组件都是独自的作用域，互不干扰。

当父子组件形成多层组件嵌套的，单纯依赖于父子组件传参必然变得繁琐，此时的策略是定义全局变量，vuex可以为vue项目的全局数据管理。

三、父组件调用子组件事件
vue中有一个参数ref

<template>
<div>
  <goodsnumber ref=“child”></goodsnumber>
</div>
</template>

只要这样绑定了ref=“child”，此时可以直接在父组件通过

this.$refs.child.function()

function为子组件中的方法。ref可以直接绑定某一个dom对象或者模板对象，然后通过this.$refs调用

四、应用策略

会传值以及调用方法，基本上可以完成绝大部分功能，但是，最重要的核心理念还是复用以及数据驱动，或者说是，编程的全局观。