VUE组件

2021年9月10日

参考：VUE官网——class与 style 的绑定      class & style 在组件上使用。然后找到 #侦听器

Extraneous non-props attributes (fields) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

报警告的原因⚠： 子组件没有唯一的根节点。（v3允许子组件不存在唯一根节点）

当子组件存在唯一根节点时候，父组件写在子组件上的所有样式、属性、字段都会自动绑定到子组件根节点上。

但是！如果子组件没有根节点，就不会自动“继承”了，这个时候，一般会把父组件传递过来的属性手动的绑定到 自己想要绑定的地方。

—————————————————华丽分割线——————————————————

参考：component is 简解

直接使用

我们一般都是使用引入组件，然后组件名的方式使用。

<Child1 />

但是当组件多起来，就很不方便

<child1 :a="1" :b="2" :c="3" @ok="handle1"/>
<child2 :a="5" :b="2" :c="3" @ok="handle1"/>
<child3 :a="1" :b="4" :c="3" @ok="handle1"/>
<child4 :a="1" :b="2" :c="4" @ok="handle1"/>

通过component 组件形式来书写

官网

子组件的prop值，同样可以通过<component ></component >这个组件来传递。相当于是每个子组件的公共部分。 

: is 对应的是 组件id / 组件名

<div v-for="(comp, index) in compList" :key="index">
    <component :is="getComponent(comp.name)" v-bind="componentProps" />
</div>