如果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,
	//...
});
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐