Vue实战篇二十一：实战Prop的双向绑定系列文章目录一、背景二、单向数据流的问题三、双向绑定的解决方法

87 阅读 0 评论 58 点赞

我是靠谱客的博主无私枫叶，最近开发中收集的这篇文章主要介绍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.

父组件

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

</template>

子组件

<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修饰符

在父组件中加入.sync修饰符

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

</template>

在子组件关闭时通过以 update:myPropName 的模式触发将prop的新值传递给父组件

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