vuejs 的watch 和 $emit

最新推荐文章于 2025-10-14 10:50:30 发布

原创最新推荐文章于 2025-10-14 10:50:30 发布 · 6.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了Vue.js中关键的API，包括watch用于响应式数据变化监测，$emit实现父子组件间的事件通信。通过具体示例展示了如何利用这些API进行高效开发。

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>

子vue

<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>

事件和指令是不一样的，如果要学指令，看 http://www.runoob.com/vue2/vue-custom-directive.html