JSFiddle - React, Tailwind, and code Playground

by kakarrot2009

HTML

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

JavaScript

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