vue私有组件属性覆盖问题

问题

在写项目的时候发现一个问题
当在父组件中引用私用组件时，在父组件中加入的值会把子组件中根元素上相应的属性覆盖

    <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>