【Vue】组件watch props属性值

最新推荐文章于 2025-10-14 10:50:30 发布

原创最新推荐文章于 2025-10-14 10:50:30 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

本文通过一个Vue实例展示了如何在子组件中监听并修改从父组件传递过来的属性(msg)。使用Vue的props、computed及watch特性来实现属性值的更新与显示。

#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/