如果component中定义了一个attribute,例如:
<template>
<div color='red'>我的最终颜色是蓝色</div>
</template>
如果在引用了这个‘子组件’的‘父页面’中定义了一个同样的attribute,例如:
<div>
<my-component color='blue'></my-component>
</div>
那么,‘父页面’传递进来的color=‘blue’,就会替换掉子组件中的color=‘red’。
但是对于class和style是例外的,上面的例子中,如果attribute换成是class,那么最终component中class的值就是‘red blue’(发生了合并)。
避免子组件的attribute被父页面影响:
Vue.component('my-component',{
inheritAttrs: false,
//...
});