1. 犀牛前端部落首页
  2. 新手错误

Vue.js如何监听props改变

一些新手朋友,可能对子组件中如何监听props改变比较疑惑,其实子组件中也可以使用watch来监听props的改变

实例代码

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

上述代码,我们在子组件中监听了myprop属性,在文件中我们可以这样使用:

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

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

我们使用watch侦听器来达到了类似hook效果,在props改变的时候该函数会调用,以下就是俺的总结过程。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2573.html

发表评论

登录后才能评论