vuejs组件根节点属性规律测试

 

 

定义组件：

Vue.component('ts-onepic',{
  model:{
    prop:'onepic',
    event:'change',
  },
  props:{  
    boxclass:String||Array||Object||None||undefined,
    width:Number||String,
  },
  data:function(){
    return {
      box_class:'img-upload',
      box_width:'200px',
    };
  },
  mounted: function(){
    if(this.boxclass){
      this.box_class = this.boxclass;
    }
    if(this.width){
      this.box_width = this.width;
      if(typeof(this.box_width)==='number'){
        this.box_width = this.box_width+'px';
      }
    }    

  },

  methods:{
  },

  template:`<div class="innerclass" test="innerattr" style="background-color:#FF0000" :class="box_class"  :style="{width:box_width}"><div>`,
});

调用组件：

<ts-onepic class="outerclass" :class="['outerclass1']" style="border:10px solid #0099FF" test="outerattr" :width="700"></ts-onepic>

输出：

<div test="outerattr" class="innerclass outerclass img-upload outerclass1" style="background-color: rgb(255, 0, 0); width: 700px; border: 10px solid rgb(0, 153, 255);"></div>

结论：

1.class和style的所有数据都会合并，顺序是 “innerclass outerclass img-upload outerclass1”,  

    innerclass是组件内部内联样式， outerclass是组件外内联样式，img-upload是v-bind组件内data值，outerclass1是组件外部bind,

    所以推测合并后顺序规律：内部内联<外部内联<内部bind<外部bind；

2. class和style会自动合并内外所有值，所以没有特殊需求不需要通过props传递样式属性；

3.其他属性外部设置会替换点内部设置；