前端工作总结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">
           &lt;!&ndash;  <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>&ndash;&gt;
				  &lt;!&ndash; <el-avatar :src="acc.dAvatar" alt="image"  />&ndash;&gt;
           </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);
			}
		}

 避免直接改变中转