父传子中 watch 监听和 ref 传值的用法和区别

本文链接：https://blog.csdn.net/YWW_ABC/article/details/127611641

以下代码 CV 即可运行

watch监听

在子组件标签上通过：来进行传值

父组件代码：

<template>
  <div id="father">
    <button @click="loadingClick">编辑</button>
    <son :info="info" :timer="timer" @close="close"></son>
  </div>
</template>

<script>
// 引入子组件
import son from "./son.vue";
export default {
  // 注册组件
  components: {
    son,
  },
  data() {
    return {
      timer: 0,
      info: {
        title: "",
        isShow: false,
      },
    };
  },
  methods: {
    // 点击编辑按钮
    // 往父组件里面传值
    loadingClick() {
      this.info.isShow = true;
      this.info.title = "编辑";
      this.timer = new Date().getTime();
    },
    // 接收子组件传过来的值 
    // 根据子组件传过来的值进行操作父组件
    close(event) {
      console.log(event);
      if (event === 1) {
        console.log("取消");
      } else {
        console.log("确认");
        console.log("刷新页面接口");
      }
      this.info.isShow = false;
    },
  },
};
</script>

子组件代码：

用 watch 监听来监听传过来的值

<template>
  <div id="son">
    <el-dialog
      :title="info.title"
      :visible.sync="info.isShow"
      width="30%"
      :before-close="closeClick"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeClick(1)">取 消</el-button>
        <el-button type="primary" @click="closeClick(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
    },
    timer: {
      type: Number,
    },
  },
  data() {
    return {};
  },
  watch: {
    timer(newValue, oldValue) {
      // 此处可将父组件传过来的值一一对应的赋值给子组件
      console.log(newValue, "父组件传过来的当前时间戳", oldValue);
    },
  },
  methods: {
    // 1:取消 2:确认
    closeClick(val) {
      if (val === 2) {
        console.log("调用编辑确认接口");
      }
      // 给父组件传值 用$emit
      this.$emit("close", val);
    },
  },
};
</script>

ref传值：

首先我们要在父组件中子组件标签上添加tref，然后再通过this.$nextTick(() => {this.$refs.reference.init(要传到子组件的值); });

父组件代码：

<template>
  <div id="father">
    <button @click="loadingClick">编辑</button>
    <son :info="info" @close="close" ref="reference"></son>
  </div>
</template>

<script>
// 引入子组件
import son from "./son.vue";
export default {
  // 注册组件
  components: {
    son,
  },
  data() {
    return {
      timer: 0,
      info: {
        title: "",
        isShow: false,
      },
    };
  },
  methods: {
    // 点击编辑按钮
    // 往父组件里面传值
    loadingClick() {
      this.info.isShow = true;
      this.info.title = "编辑";
      this.timer = new Date().getTime();
      this.$nextTick(() => {
        this.$refs.reference.init(this.timer);
      });
    },
    // 接收子组件传过来的值
    // 根据子组件传过来的值进行操作父组件
    close(event) {
      console.log(event);
      if (event === 1) {
        console.log("取消");
      } else {
        console.log("确认");
        console.log("刷新页面接口");
      }
      this.info.isShow = false;
    },
  },
};
</script>

子组件代码：

子组件中在 methods 里面通过 init(val) 来获取到父组件传过来的值（ init(val) val 就是父组件传过来的值）

<template>
  <div id="son">
    <el-dialog
      :title="info.title"
      :visible.sync="info.isShow"
      width="30%"
      :before-close="closeClick"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeClick(1)">取 消</el-button>
        <el-button type="primary" @click="closeClick(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
    },
    timer: {
      type: Number,
    },
  },
  data() {
    return {};
  },
  methods: {
    init(val) {
      // 此处可将父组件传过来的值一一对应的赋值给子组件
      console.log(val, "父组件传过来的当前时间戳");
    },
    // 1:取消 2:确认
    closeClick(val) {
      if (val === 2) {
        console.log("调用编辑确认接口");
      }
      // 给父组件传值 用$emit
      this.$emit("close", val);
    },
  },
};
</script>

watch 和 ref 的区别

很多人会觉得watch监听只需要在子组件里面监听一下当前传过来的值不也可以起到打开子组件就回显的效果吗？watch监听这一方法是比较简单，但是他存在一个偶发性的问题，我们以上案例传的是当前的时间戳，时间戳他是不会一样的他不管怎样都是可以监听到的，但是我们传的是一个固定的值watch监听还会监听的到吗?

ref 比起 watch 监听是比较麻烦一点点，但是他很好的避免了 watch 监听这一偶发性的问题

当然本人还是建议在这种需求下使用 ref 会好一点