我是靠谱客的博主 无私枫叶,这篇文章主要介绍Vue实战篇二十一:实战Prop的双向绑定系列文章目录一、背景二、单向数据流的问题三、双向绑定的解决方法,现在分享给大家,希望可以做个参考。

系列文章目录

Vue基础篇一:编写第一个Vue程序
Vue基础篇二:Vue组件的核心概念
Vue基础篇三:Vue的计算属性与侦听器
Vue基础篇四:Vue的生命周期(秒杀案例实战)
Vue基础篇五:Vue的指令
Vue基础篇六:Vue使用JSX进行动态渲染
Vue提高篇一:使用Vuex进行状态管理
Vue提高篇二:使用vue-router实现静态路由
Vue提高篇三:使用vue-router实现动态路由
Vue提高篇四:使用Element UI组件库
Vue提高篇五:使用Jest进行单元测试
Vue提高篇六: 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一: 使用Vue搭建注册登录界面
Vue实战篇二: 实现邮件验证码发送
Vue实战篇三:实现用户注册
Vue实战篇四:创建多步骤表单
Vue实战篇五:实现文件上传
Vue实战篇六:表格渲染动态数据
Vue实战篇七:表单校验
Vue实战篇八:实现弹出对话框进行交互
Vue实战篇九:使用省市区级联选择插件
Vue实战篇十:响应式布局
Vue实战篇十一:父组件获取子组件数据的常规方法
Vue实战篇十二:多项选择器的实际运用
Vue实战篇十三:实战分页组件
Vue实战篇十四:前端excel组件实现数据导入
Vue实战篇十五:表格数据多选在实际项目中的技巧
Vue实战篇十六:导航菜单
Vue实战篇十七:用树型组件实现一个知识目录
Vue实战篇十八:搭建一个知识库框架
Vue实战篇十九:使用printjs打印表单
Vue实战篇二十:自定义表格合计
Vue实战篇二十一:实战Prop的双向绑定

文章目录

  • 系列文章目录
  • 一、背景
  • 二、单向数据流的问题
  • 三、双向绑定的解决方法


一、背景

  • 在实际项目中 ,我们经常会遇到这样一种场景:父组件通过prop传值给子组件,子组件根据传值弹出对话框显示出数据
  • 举个例子: 父组件是一组发货单列表,通过点击某个发货单,将发货单号通过prop传值给到子组件,让子组件显示出发货单的明细数据
    在这里插入图片描述
    在这里插入图片描述

二、单向数据流的问题

  • 在子组件中强行清空父组件传递的值,会报以下的错误:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

  1. 父组件
复制代码
1
2
3
4
5
6
<template> <!-- 调用子组件 --> <OrderDelivery :delivery-no="deliveryNo" /> </template>
  1. 子组件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template> <el-dialog ref="deliveryDialog" append-to-body :close-on-click-modal="false" :visible.sync="showDialog" :title="'发货单'" width="950px" :before-close="closeDeliveryDialog()" > <div class="deliveryHeader"> <div class="deliveryHeader"> <span style="font-weight:bold;">供应商:</span> <span>{{ supplierFullName }}</span> <span style="font-weight:bold;margin-left:15px;">发货日期:</span> <span>{{ parseTime(deliveryDate,'{y}-{m}-{d}') }}</span> <span style="font-weight:bold;margin-left:15px;">发货单号:</span> <span>{{ deliveryNo }}</span> <span style="font-weight:bold;margin-left:15px;">合同号:</span> <span>{{ contractNo }}</span> </div> <div class="deliveryHeader"> </div> </div> <el-table ref="deliveryTable" :data="orderDelivery" stripe border style="width: 100%; margin-top:20px"> <el-table-column width="150px" :show-overflow-tooltip="true" prop="orderNo" label="订单行"> <template slot-scope="scope"> <span>{{ scope.row.orderNo }}{{ "-" }}{{ scope.row.orderItem }}</span> </template> </el-table-column> <el-table-column width="180px" prop="supplierOrder.materialCode" label="物料编码" /> <el-table-column width="100px" :show-overflow-tooltip="true" prop="supplierOrder.materialName" label="物料名称" /> <el-table-column :show-overflow-tooltip="true" prop="supplierOrder.materialModel" label="型号" /> <el-table-column :show-overflow-tooltip="true" prop="supplierOrder.materialStd" label="规格" /> <el-table-column :show-overflow-tooltip="true" width="80px" prop="supplierOrder.qty" label="订单量" /> <el-table-column width="100px" prop="deliveryQty" label="发货数量" /> </el-table> <div slot="footer" class="no-print"> <div slot="footer" class="dialog-footer"> <el-button type="text" @click="cancel">取消</el-button> <el-button :loading="saving" type="danger" @click="deleteDelivery">删除</el-button> <el-button type="primary" @click="print">打印</el-button> <el-button type="warning" @click="exportExcel">导出</el-button> </div> </div> </el-dialog> <script> export default { props: { deliveryNo: { type: String, default: '' } }, method:{ closeDeliveryDialog() { // 关闭对话话直接修改prop传的值 this.deliveryNo = '' } } ... </script> } </template>

三、双向绑定的解决方法

  • 参考官方文档 使用.sync修饰符
  1. 在父组件中加入.sync修饰符
复制代码
1
2
3
4
5
6
<template> <!-- 调用子组件 --> <OrderDelivery :delivery-no.sync="deliveryNo" /> </template>
  1. 在子组件关闭时通过以 update:myPropName 的模式触发将prop的新值传递给父组件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template> <el-dialog ref="deliveryDialog" append-to-body :close-on-click-modal="false" :visible.sync="showDialog" :title="'发货单'" width="950px" :before-close="closeDeliveryDialog()" > ... </el-dialog> <script> export default { props: { deliveryNo: { type: String, default: '' } }, method:{ closeDeliveryDialog() { // 以update:myPropName 的模式触发将prop的新值传递给父组件 this.$emit('update:deliveryNo', '') } } ... </script> } </template>

最后

以上就是无私枫叶最近收集整理的关于Vue实战篇二十一:实战Prop的双向绑定系列文章目录一、背景二、单向数据流的问题三、双向绑定的解决方法的全部内容,更多相关Vue实战篇二十一:实战Prop内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(118)

评论列表共有 0 条评论

立即
投稿
返回
顶部