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. 父组件

<template>
	<!-- 调用子组件 -->
	<OrderDelivery :delivery-no="deliveryNo" />

</template>

2. 子组件

<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 }}