</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"><!--循環(huán)遍歷得到每一個數(shù)據(jù) 傳入data的每一個數(shù)據(jù)--><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-cardshadow="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">粉絲數(shù)：{{ 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">粉絲數(shù)：{{ 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,/*雙向綁定數(shù)據(jù) 雙向數(shù)據(jù)綁定*/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數(shù)組*/var list = [];/*定義一個字符串對象*/var data = '';for (var i = 0; i < res.data.length; i++) {/*創(chuàng)建數(shù)組{"id": "1","name": "Hi蘇州","num_fan": null,"avg_view": null,"platform": "今日頭條","department_id": "1","column": null,"price": "111.00","department_name": "ddd1"},*/data = {/*任務(wù)id*/id: res.data[i].id,/*賬號名稱*/name: res.data[i].name,/*粉絲數(shù)*/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,/*暫時寫死的兩個字段 后續(xù)可注釋*/pAvatar: "./logo.png",dAvatar: "./logo.png",plugin_icon_url:res.data[i].plugin_icon_url,}list.push(data);}/*賦值給data*/this.data = list;})},/*父子組件傳值 通過select的屬性進(jìn)行傳值*/handleCheckedDataChange(val){console.log(this,"3333")/*觸發(fā)父親組件的方法 冰進(jìn)行傳值*/this.checked=!this.checkedconsole.log(this.checked,"1111")this.$emit("seletct", val);}}

避免直接改變 中轉(zhuǎn)

總結(jié)

以上是生活随笔為你收集整理的工作339:pc父组件通过props传值给子组件，如何避免子组件改变props的属性值报错问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。