问题
在写项目的时候发现一个问题
当在父组件中引用私用组件时,在父组件中加入的值会把子组件中根元素上相应的属性覆盖
<planBox :pthisPlan="pthisPlan" class="t32"></planBox>
<template>
<div id="thisPlan" class="thisPlan">
<h1>本周计划</h1>
<div class="inner" >
<div v-for="(item,i) in pthisPlan" :key="i">
<h2>{{i+1}}.</h2>
<div v-for="(item,j) in pthisPlan[i].weekly_taskName">
<h3>- {{pthisPlan[i].weekly_taskName[j]}}</h3>
<p>{{pthisPlan[i].weekly_content[j]}}</p>
</div>
</div>
</div>
</div>
</template>
- class:因为class是不唯一的,因此,如果父组件给私有元素的根元素的class赋值,就会给私有组件的根元素加一个class值
- id:因为id是唯一的,因此,如果父组件给私有元素的根元素的id赋值,就会把私有元素内部给id赋的值覆盖掉
<planBox :pthisPlan="pthisPlan" id="s"></planBox>
<template>
<div id="thisPlan" class="thisPlan">
<h1>本周计划</h1>
<div class="inner" >
<div v-for="(item,i) in pthisPlan" :key="i">
<h2>{{i+1}}.</h2>
<div v-for="(item,j) in pthisPlan[i].weekly_taskName">
<h3>- {{pthisPlan[i].weekly_taskName[j]}}</h3>
<p>{{pthisPlan[i].weekly_content[j]}}</p>
</div>
</div>
</div>
</div>
</template>