vue父子组件传值之单向数据流非常详细的讲解(一)

有个DialogInfo的组件：父组件向子组件传值visible
在这里插入图片描述
点击新增的时候会把dialogTableVisible的值改变：

这样的话运行时候会报错：

解决办法：

<template>
  <el-dialog title="收货地址" :visible.sync="visible_flag" v-on:close="handleClose" :modal-append-to-body="false">
    <el-table>
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
    
    
  name: "DialogInfo",
  props: {
    
    
    visible: Boolean
  },
  watch: {
    
    
    visible: {
    
    
      handler(newValue, oldValue){
    
    
        this.visible_flag = newValue
        console.log(`old value ${
      
      oldValue} --------> new value ${
      
      newValue}`);
      }
    }
  },
  methods: {
    
    
    handleClose() {
    
    
      this.$emit("changeStatusHide", false)
    }
  },
  data() {
    
    
    return {
    
    
      visible_flag: false
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

1.在子组件data里声明一个自己的变量visible_flag，默认值就是父组件传进来的默认值false
2.同时把visible_flag绑定到el-dialog标签里：
在这里插入图片描述
3.通过watch监听父组件传来的值visible，并且调用handler方法监听父组件新旧值，然后修改自己的属性值visible_flag和父组件传进来的新的值newValue保持同步：

我们来梳理一下：
父组件默认向子组件传递的参数是false:
在这里插入图片描述
一旦点击新增按钮：

dialogTableVisible的值就改成true
子组件是通过visible去接收父组件传过来的参数的，并且监听visible

此时发现父组件传过来的visible从false变成true了，于是触发handler，把子组件自己的visible_flag值改成新的值true，所以diaglog就显示了：
在这里插入图片描述
但是点击关闭dialog以后不管怎么点击按钮都无法换出dialog，因为点击时候只会重复设置：

这样子组件里面监听不到传来的参数的变化，就不会做出任何反应

我们最后要做的就是让子组件每次监听到父组件传值过来，并且修改自己的visible_flag以后，等到用户关闭这个dialog时（会触发dialog的close事件），告诉父组件，嘿伙计，你该把dialogTableVisible的值改回去为false了！

因为子组件不能修改父组件的值（单向数据流限制），所以子组件只能通过$emit发射一个事件告诉父组件让其修改值：

点击关闭dialog时候触发close事件回调函数handleClose：
在这里插入图片描述
在handleClose中，子组件告诉父组件：嘿，快点，能不能做一下这件changeStatusHide事?并且我给你一个值false

父组件这里，监听到子组件给自己emit过来一个事件changeStatusHide：

于是调用回调函数change()，并且用子组件传给自己的值false设置自己的属性dialogTableVisible的值也为false：
在这里插入图片描述

这样，才能保证下次点击按钮时候子组件监听到父组件传过来的参数发生变化：从false->true

vue父子组件传值之单向数据流非常详细的讲解(一)

猜你喜欢