Vue2 父组件和子组件属性值双向绑定

概要

我们比较常用的父子组件之间的交互方式：
● 父组件通过props将数据流入到子组件；
● 子组件通过$emit将更新后的数组发送的父组件；
今天，我们通过另一种方式实现交互，参考input框的v-model，实现自定义组件的双向数据绑定。
效果，父组件值改变，子组件的值跟着改变；反之，子组件值发生变化，父组件值随之变化。

整体架构流程

子组件

由于不能直接修改props属性值，我们这里定义valueData，通过监听实时接收value值，通过click方法修改valueData。这里注意model语法糖prop是接收的props属性value保持一致，event是先上传递的事件名。

<template>
  <div>
    <div>{{ `子组件值: ${value}` }}</div>
    <div @click="click">点击此处修改值</div>
  </div>
</template>

<script>
export default {
  name: "ChildrenComponent",
  model: { // 双向绑定语法糖
    prop: "value",
    event: "change"
  },
  props: {
    value: Number
  },
  components: {},
  data() {
    return {
      valueData: ""
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.valueData = newValue;
      console.log(`子组件值：${newValue}`);
    }
  },
  methods: {
    click() { // 子组件事件
      this.valueData++; // 改变值
      this.$emit("change", this.valueData); // 发出事件
    }
  }
};
</script>
<style lang='less' scoped>
</style>

父组件

父组件通过v-model绑定text值，名称不一定是value，可以是其他任意符合命名规范的字符串，这里是text。子组件通过change事件更新数据后，v-mode绑定值随之变化。或者父组件修改text值后，子组件value值随之变化。

<template>
  <div>
    <div>{{ `父组件值：${text}` }}</div>
    <div @click="click">点击此处修改值</div>
    <span>-----------------------------------------------------------</span>
    <children-component v-model="text"></children-component>
  </div>
</template>

<script>
import ChildrenComponent from "@/views/ChildrenComponent";

export default {
  name: "FatherComponent",
  components: { ChildrenComponent },
  data() {
    return {
      text: 1
    };
  },
  watch: {
    text(newValue, oldValue) {
      console.log(`父组件值：${newValue}`);
    }
  },
  methods: {
    click() {
      this.text--;
    }
  }
};
</script>
<style lang='less' scoped>
</style>

拓展

小结

Vue2 父子组件传值核心：Props Down, Events Up

父传子 (Props Down)：
父组件：在子组件标签上通过属性绑定传值
子组件：使用 props 选项接收 props: [‘title’]

子传父 (Events Up)：
子组件：通过 this.$emit(‘自定义事件’, 数据) 触发事件
父组件：在子组件标签上通过事件监听接收 <Child @自定义事件=“handleEvent”>

特点：
数据流是单向的，props 不可在子组件直接修改
是 Vue 组件间通信最基础、最常用的方式