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

qq233712105

于 2021-04-14 10:02:57 发布

阅读量164

点赞数 1

分类专栏： vuejs

本文链接：https://blog.csdn.net/qq233712105/article/details/115690772

版权

vuejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了Vue组件中class和style属性的合并规则，总结了内外部样式和属性设置的优先级。在组件定义时，内部内联样式、外部内联样式、内部数据绑定样式和外部数据绑定样式会按特定顺序合并。通常情况下，无需通过props传递样式属性，因为Vue会自动处理。此外，外部设置的其他属性会覆盖内部设置。

摘要由CSDN通过智能技术生成

定义组件：

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.其他属性外部设置会替换点内部设置；