vue2父子组件实时传值

在Vue2中，父子组件之间可以通过props和事件来实现实时传值。

1. 使用props：父组件可以通过props向子组件传递数据，子组件可以通过props接收并使用这些数据。当父组件的数据更新时，子组件会自动更新。

父组件：

<template>
  <div>
    <p>父组件数据：{{ parentData }}</p>
    <child-component :childData="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: '父组件初始数据',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

子组件：

<template>
  <div>
    <p>子组件数据：{{ childData }}</p>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true,
    },
  },
};
</script>

2. 使用事件：子组件可以通过$emit触发自定义事件，并将数据传递给父组件。父组件可以通过监听子组件的自定义事件来获取子组件传递的数据。

父组件：

<template>
  <div>
    <p>父组件数据：{{ parentData }}</p>
    <child-component @updateData="updateParentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: '父组件初始数据',
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    updateParentData(childData) {
      this.parentData = childData;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <button @click="updateData">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateData() {
      const childData = '子组件数据';
      this.$emit('updateData', childData);
    },
  },
};
</script>

通过以上两种方式，父子组件之间可以实现实时传值。在props方式下，父组件的数据更新会自动反映到子组件上；在事件方式下，子组件通过$emit触发自定义事件，父组件通过监听事件来获取子组件传递的数据并更新父组件的数据。