SOURCE

Yox.component("Aaa", {
  
  propTypes: {
    options: {
      type: function  (key, value) {
        // 自定义校验
        if(!value.value){
          value.value = "morenzhi";
          console.log('warn value is not defined')
        }
        if (value.size > 16) {
          value.size = 18;
          console.log('warn value.size > 16')
        }
      },
      value: {
        value: "abc"
      }
    }
  },
  template: "<div> <span style='color: {{options.color}}; font-size: {{options.size}}px;'>{{options.value}}, ooo</span> </div>"
});

var app = new Yox({ 
  el: "#app",
  template: "#template",
  
  methods: {
    setValue: function(){
      this.set("options.value", "changed");
    },
     getValue: function(){
      console.log(this.get("options.value"));
    }
  },
  
  
  data: {
    
    options: {
      color: "red",
      size: 18,
      value: "hello1"
    }
    
    
  }

})

<div id="app"></div>
<script id="template" type="text/plain">
	<div>
    <Aaa options="{{options}}" ></Aaa>
    
    
    <button type="button" on-click="setValue()">set value</button>
   
 <button type="button" on-click="getValue()">get value</button>
  </div>
</script>