代码之家 › 专栏 › 技术社区 › Pds Ink

vuejs-如何使用带道具的手表?

watch vuejs2 javascript

Pds Ink · 技术社区 · 7 年前

我试图访问道具数据,以便在vue js中的watch方法中使用,但显然似乎做了任何事情,以下是我所做的:

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();
    }
}

提前谢谢你

1 回复 | 直到 7 年前

Thusitha 7 年前

extDesktop watch 不会在Vue组件初始化进程上启动。仅当您稍后从某处更改值时才会触发。

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ extdesktop }}</p>`,
      props: ['extdesktop'],
      watch: { 
      	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>