vuejs 的watch 和 $emit

悠悠 2022-06-12 14:43 465阅读 0赞

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

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

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

### watch ###

*  类型: `{ [key: string]: string | Function | Object }`
 *  详细:
    
    一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个属性。
 *  示例:
    
    <table style="width:557px; border-collapse:collapse; padding:0px; margin:0px"> 
     <tbody> 
      <tr style="width:557px; border-collapse:collapse; padding:0px; margin:0px"> 
       <td style="width:557px; border-collapse:collapse; padding:0px; margin:0px"> <pre style="">
           
            
         <div style="min-height:1.5em">
            
             
          <span style="color:rgb(233,105,0)">var</span> vm = 
            
             
          <span style="color:rgb(233,105,0)">new</span> Vue({
           
            
         </div>
           
            
         <div style="min-height:1.5em">  
            
             
          <span>data</span>: {
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span>a</span>: 
            
             
          <span style="color:rgb(174,129,255)">1</span>,
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span>b</span>: 
            
             
          <span style="color:rgb(174,129,255)">2</span>,
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span>c</span>: 
            
             
          <span style="color:rgb(174,129,255)">3</span>
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
              },
           
            
         </div>
           
            
         <div style="min-height:1.5em">  
            
             
          <span>watch</span>: {
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span>a</span>: 
            
             
          <span><span style="color:rgb(0,146,219)">function</span> (<span>val, oldVal</span>) </span>{
           
            
         </div>
           
            
         <div style="min-height:1.5em">      
            
             
          <span style="color:rgb(66,185,131)">console</span>.log(
            
             
          <span style="color:rgb(66,185,131)">'new: %s, old: %s'</span>, val, oldVal)
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
                },
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span style="color:rgb(179,179,179)">// 方法名</span>
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
                b: 
            
             
          <span style="color:rgb(66,185,131)">'someMethod'</span>,
           
            
         </div>
           
            
         <div style="min-height:1.5em">    
            
             
          <span style="color:rgb(179,179,179)">// 深度 watcher</span>
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
                c: {
           
            
         </div>
           
            
         <div style="min-height:1.5em">      
            
             
          <span>handler</span>: 
            
             
          <span><span style="color:rgb(0,146,219)">function</span> (<span>val, oldVal</span>) </span>{ 
            
             
          <span style="color:rgb(179,179,179)">/* ... */</span> },
           
            
         </div>
           
            
         <div style="min-height:1.5em">      
            
             
          <span>deep</span>: 
            
             
          <span style="color:rgb(174,129,255)">true</span>
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
                }
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
              }
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
            })
           
            
         </div>
           
            
         <div style="min-height:1.5em">
          
             
            vm.a = 
            
             
          <span style="color:rgb(174,129,255)">2</span> 
            
             
          <span style="color:rgb(179,179,179)">// -&gt; new: 2, old: 1</span>
           
            
         </div></pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    注意，不应该使用箭头函数来定义 watcher 函数 (例如 `searchQuery: newValue => this.updateAutocomplete(newValue)`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.updateAutocomplete` 将是 undefined。
 *  参考： [实例方法 - vm.$watch][- vm._watch]
 *  [Source][]

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

*  参数：
    
     *  `{string} event`
     *  `[...args]`
    
    触发当前实例上的事件。附加参数都会传给监听器回调。
 *  [Source][Source 1]

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][http_www.runoob.com_vue2_vue-custom-directive.html]

[- vm._watch]: https://cn.vuejs.org/v2/api/#vm-watch
[Source]: https://github.com/search?utf8=%E2%9C%93&q=repo%3Avuejs%2Fvue+extension%3Ajs+%22watch%22&type=Code
[Source 1]: https://github.com/search?utf8=%E2%9C%93&q=repo%3Avuejs%2Fvue+extension%3Ajs+%22Vue.prototype.%24emit%22&type=Code
[http_www.runoob.com_vue2_vue-custom-directive.html]: http://www.runoob.com/vue2/vue-custom-directive.html