vuejs - 如何使用道具手表？

Question

我试图访问一个道具的数据在VUE JS手表方法中使用，但显然好像做任何事，在这里我做了什么：

HTML

   <lista-servizi-blu 
       :servizi="modello" 
       :extdesktop="servizi_selezionati_desktop" 
       v-on:centramappa="mappaCenter($event)" 
       v-on:linebigger="inebigger($event)"> 
       </lista-servizi-blu> 

JAVASCRIPT（组件）

props: ['servizi','extdesktop'], 
    watch: { 
    extdesktop: function(val, oldVal){ 
     alert(val); 
     this.mostraDescLungaBlu(); 
    } 
} 

警报似乎没有被触发，我该如何解决？ 预先感谢您

Answer 1

extDesktop watch不会触发Vue组件初始化进程。它只会在您稍后从某处更改值时触发。

请看下面的例子

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'Hello' 
 
    }, 
 
    components: { 
 
    'child' : { 
 
     template: `<p>{{ extdesktop }}</p>`, 
 
     props: ['extdesktop'], 
 
     watch: { 
 
     \t extdesktop: function(newVal, oldVal) { 
 
      // watch it 
 
      alert('Prop changed: ' + newVal + ' | was: ' + oldVal); 
 
      console.log('Prop changed: ', newVal, ' | was: ', oldVal) 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <child :extdesktop="text"></child> 
 
    <button @click="text = 'Another text'">Change text</button> 
 
</div>