Vue组件watch props属性值

Posted 2020-11-01 梦琪小生

#html
<div id="example">
  <p>
    <child :msg="msg"></child>
  </p>
  <p>
    <button @click=‘props‘>改变props</button>
  </p>
</div>

#JS
Vue.component(‘child‘, {
  props: [‘msg‘],
  computed: {
    value:{
      get:function(){
        return this.msg
      },
      set:function(value){
        this.msg = value;
      }
    }
  },
  watch:{
      msg:function(val,oldval){
      this.value=‘改变子组件msg‘;
    }
  },
  template: ‘<span>{{ value }}</span>‘
})

var vm=new Vue({
    el:‘#example‘,
  data:function(){
      return{
        msg:‘默认子组件msg‘
    }
  },
  methods:{
        props:function(){
        this.$set(‘msg‘,‘2‘);
    }
  }
})

代码： https://jsfiddle.net/kakarrot2009/ebeqhr6x/