前端工作总结288-pc父组件通过props传值给子组件，如何避免子组件改变props的属性值报错问题

</el-form>
      <div>
        <!--子代方法有一个·传值传向父级 onselect去接收这个值-->
        <select-account :data1.sync="accountList" :checkedData.sync="checkedData1" @seletct="onSelect" />
      </div>
      <div style="clear: both"></div>
      <template v-slot:footer>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>

<el-checkbox-group   v-model="ooo"  @change="handleCheckedDataChange">
       <!--循环遍历得到每一个数据  传入data的每一个数据-->
       <el-checkbox  v-for="acc in data" :label="acc" :key="acc.id" style="margin-left: 5px;margin-top: 20px">
       <!--  <el-checkbox v-for="acc in data" :label="acc" :key="acc.id">-->
         <el-card
           shadow="hover"
           class="card-container"
          style="display: flex;justify-content: center"
         >
         <!--  <div class="avatar-img">
           <!&ndash;  <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>–>
          <!&ndash; <el-avatar :src="acc.dAvatar" alt="image"  />&ndash;>
           </div>-->
           <div style="display: flex;justify-content: left;align-items: center">
             <div style="display: flex;flex-direction: column;font-size: 12px;justify-content: center">
               <div style="display: flex;justify-content: left">
                 <div style="margin-top: 10px;margin-right: 20px;text-align: center">
                   <img v-if="acc.plugin_icon_url!=''&&acc.plugin_icon_url!=null" style="width: 24px;height: 24px" :src="acc.plugin_icon_url" alt="">
                   <i v-else style="width: 24px;height: 24px" class="el-icon-warning-outline"></i>
                   <h1 style="font-size: 12px;">
             {{ acc.name }}
           </h1>
          <p style="font-size: 12px;margin-top: 2px;">
            {{ acc.departmentName }}
          </p>
                 </div>
                 <div style="display: flex;flex-direction: column;justify-content: left;text-align: center">
                   <div style="font-size: 12px;background-color: #ccc;">{{ acc.platform }}</div>
                   <p style="font-size: 12px;">刊例价:￥{{ acc.price }}</p>
                   <p style="font-size: 12px">平均播放量：{{ acc.avg_view==null?0:acc.avg_view }} </p>
                   <p style="font-size: 12px">粉丝数：{{ acc.num_fan==null?0:acc.num_fan }}</p>
                 </div>
                 </div>
               </div>
        <!--   <div style="margin-left: 40px;">
             <input type="checkbox" name="running" :checked="checked" style="width: 20px;height: 20px">
           </div>-->
           </div>
          <!-- </div>-->
           <!--<div class="gy-right">
           <div class="account-name">
             <span>{{ acc.platform }}</span>
           </div>-->
           <!--<div class="account-info">
             <p class="p-slide">刊例价：¥{{ acc.price }}</p>
             <p class="p-slide">平均播放量：{{ acc.avg_view }} </p>
             <p class="p-slide">粉丝数：{{ acc.num_fan }}</p>
           </div>-->
         </el-card>
       </el-checkbox>
       </el-checkbox-group>
  </div>
</template>
<script>
  import {
    getAction
  } from "@/api";
  export default {
    name: "SelectAccount",
    // props: {
    //  value: {
    //    type: String | Number,
    //    required: true
    //  },
    // },
    model: {
      prop: "value",
      event: "change"
    },
   /* computed:{
      ooo:function (){
        return this.checkedData
      }
    },*/
    props: ['checkedData','data1'],
    data() {
      return {
        ooo: this.checkedData,
        selectStatus: [],
        data: this.data1,
        /*双向绑定数据 双向数据绑定*/
        checked:true
      };
    },
    mounted() {
      this.list();
    },
   /* watch(){
      console.log(this.checkedData,"11111")
    },*/
    methods: {
      /*向父组件传值*/
      // onSelect(data) {
      //  this.$emit("seletct", data);
      // },
      /*test(){
        this.checked=!this.checked
      },*/
      list() {
        getAction('/account/list').then(res => {
          /*定义一个list数组*/
          var list = [];
          /*定义一个字符串对象*/
          var data = '';
          for (var i = 0; i < res.data.length; i++) {
            /*创建数组
            {
              "id": "1",
                "name": "Hi苏州",
                "num_fan": null,
                "avg_view": null,
                "platform": "今日头条",
                "department_id": "1",
                "column": null,
                "price": "111.00",
                "department_name": "ddd1"
            },*/
            data = {
              /*任务id*/
              id: res.data[i].id,
              /*账号名称*/
              name: res.data[i].name,
              /*粉丝数*/
              num_fan: res.data[i].num_fan,
              /*平均播放量*/
              avg_view: res.data[i].avg_view,
              /*账号类型*/
              platform: res.data[i].platform,
              /*部门id*/
              department_id: res.data[i].department_id,
              column:res.data[i].column,
              /*刊价比*/
              price: res.data[i].price,
              /*部门名称*/
              departmentName: res.data[i].department_name,
              /*暂时写死的两个字段 后续可注释*/
              pAvatar: "./logo.png",
              dAvatar: "./logo.png",
              plugin_icon_url:res.data[i].plugin_icon_url,
            }
            list.push(data);
          }
          /*赋值给data*/
          this.data = list;
        })
      },
      /*父子组件传值 通过select的属性进行传值*/
      handleCheckedDataChange(val){
        console.log(this,"3333")
        /*触发父亲组件的方法 冰进行传值*/
        this.checked=!this.checked
        console.log(this.checked,"1111")
        this.$emit("seletct", val);
      }
    }