工作339: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-cardshadow="hover"class="card-container"style="display: flex;justify-content: center"><!-- <div class="avatar-img"><!– <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>–><!– <el-avatar :src="acc.dAvatar" alt="image" />–></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.checkedconsole.log(this.checked,"1111")this.$emit("seletct", val);}}
避免直接改变 中转
工作339:pc父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题相关推荐
- 当在 终端 中用 npm 安装 Vant 组件库时,发生“npm ERR code ERESOLVE ;npm ERRERESOLVE could not resolve;”报错时,该怎么办?
出现的问题: 当在 终端 中用 npm 安装 Vant 组件库时,发生 npm ERR! code ERESOLVE: npm ERR! ERESOLVE could not resolve:报错时, ...
- vue修改props传过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever the par
在做项目时有时候会遇到这种错误 这句话的意思是说,避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.相反,使用基于道具值的数据或计算属性. 就是不能直接改变父组件传过来的props,所以怎么办 ...
- 触发父组件变量_Vue组件之间的传值
我们知道组件之间传值无非就三种情况 父组件给子组件传值 子组件给父组件传值 兄弟组件之间的传值 父 => 子 老王是个有钱人,准备把自己的家产传给宝贝儿子小王 用代码模拟实现就是下图这样 现在小 ...
- React(04):React中的组件化及父子组件间的传值取值
前言 接着前一篇继续学习React组件化 React(03):React中的JSX语法 正文 什么是组件化: 是从 UI 界面视图的角度 来进行分析的:把一些可复用的UI元素,抽离为单独的组件:便于项 ...
- 微信小程序使用vant组件报错
背景介绍:在一个月之前新建了一个微信小程序项目,新建一个项目参照了 微信小程序npm支持的步骤,构建了npm,官网地址如下: npm 支持 | 微信开放文档 之后分别在两台电脑上跑过,之前预览开发版代 ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- Vue 中 props 传值,父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
- vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue引入id3_Vue页面间传值,客户端数据存储,以及父子组件间props传值
初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...
最新文章
- VMware 使用
- 记录 之 不同的Normalization方式
- Kubernetes(六) - Secret和私有仓库认证
- JDK 11的一般可用性
- LeetCode 1058. 最小化舍入误差以满足目标(排序+贪心)
- Frontpage网页制作软件,你们还记得吗?
- win11为什么比win10慢 Windows11比Win10慢的解决方法
- gitlab一键安装 笔记
- obd协议 混动车_最新人工智能驾考系统OBD信号采集模块
- 程序设计实践——第二章
- 搜狗输入法劝退换成了谷歌拼音
- excel服务器表格显示不出来,excel表格内容显示不全的解决方案
- PC_溢出概念+判断方法+示例
- 淘宝API接口系列,获取购买到的商品订单列表,订单详情,订单物流,收货地址列表,买家信息,买家token,卖出的商品订单列表
- 博客已死?移动互联网时代博客的价值
- Latex在线编辑器帮助文档
- 【Rosalind】Counting Point Mutations
- unity3d:弹道飞行
- 7-50 近似求PI (15分)
- Mac下安装cordova-hot-code-push-cli失败
热门文章
- Oracle 学习----:查看当前时间与Sqlserver语句不一样了
- jQuery 常用的方法
- Python循环的一些基本练习
- HDMI转MIPI DSI芯片方案TC358779XBG
- .NET面试题解析(02)-拆箱与装箱
- 方法覆盖(方法重写)
- 2017 《Java技术预备作业 》1501 乔 赫
- (转)二分图最大匹配的König定理及其证明
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十八:SDRAM模块① — 单字读写...
- mysql 8.0.16修改root密码_mysql 8.0.16 winx64及Linux修改root用户密码 的方法