vue有很多像watch，prop，emit等这种api，自己看官网

现在给出两个简单的例子：

watch 有两种，一种是深度监听，一种是浅度监听

watch

• 类型: { [key: string]: string | Function | Object }

• 详细:

  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

• 示例:

  var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { a: function (val, oldVal) { console.log( 'new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1

  注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

• 参考： 实例方法 - vm.$watch

• Source

vm.$emit( event, […args] )

• 参数：

  • {string} event
  • [...args]

  触发当前实例上的事件。附加参数都会传给监听器回调。

• Source

Emit, 实际上是定义一种事件，然后父vue在调用子vue的时候，如果子vue定义了一种事件，那么父vue在调用子vue时 就可以 <son-vue @newEvent='handlerFunction' ></son-vue>

代码实例：

父vue

 <el-col v-for="(value, key) in chartSort" :span="computedSpan" :offset="computedOffset" v-if="value == true" >
        <fly-chart :chart="key" :chartData="chartData" @close="closeOneChart"></fly-chart>
 </el-col>

<template>
    <el-row>
      <el-row align="top">
        <el-col :span="1" :offset="23">
          <el-button size="mini" icon="close" @click="closeChart"></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="chart == 'line'">
          <line-chart :chartData="chartData"></line-chart>
        </el-col>
        <el-col v-if="chart == 'bar'">
          <bar-chart :chartData="chartData"></bar-chart>
        </el-col>
      </el-row>
    </el-row>
</template>

<script>
  import BarChart from './../basicChart/BarChart'
  import LineChart from './../basicChart/LineChart'
  export default {
    name: 'fly-chart',
    props: ['chart', 'chartData'],
    components: {
      LineChart: LineChart,
      BarChart: BarChart
    },
    data: function(){
      return {

      }
    },
    methods: {
      closeChart: function(){
        var self = this;
        this.$emit('close', self.chart);  // 定义一个临时事件，然后父组件可以监听到
      }
    }
  }
</script>

<style>

</style>