vue2 子组件调用父组件数据并展示，父组件修改了值，子组件怎么没有同步更新？子组件拿到父组件数据使用了get和set

子组件调用父组件数据并展示后，如果父组件修改了该数据，子组件不会同步更新。这是因为Vue的响应式系统是基于依赖追踪的，只有在模板中使用的数据才会被追踪，而子组件中使用的父组件数据并没有在模板中使用，所以不会被追踪。如果想要子组件同步更新父组件数据，可以使用v-model指令或者$emit方法来实现。具体来说，可以在子组件中使用v-model绑定父组件数据，并在子组件中触发input事件来更新父组件数据；或者在子组件中使用$emit方法触发自定义事件，并在父组件中监听该事件来更新数据。如果你使用了get和set方法来获取和设置父组件数据，那么子组件仍然无法同步更新父组件数据，因为这并不会触发依赖追踪。

相关问题

vue2 父组件的父组件调用子组件数据

在Vue2中，父组件的父组件可以通过`$parent`属性来访问子组件的实例，但是不建议这样做，因为这样会使得组件之间的耦合度过高，不利于组件的复用和维护。更好的做法是通过`props`和`$emit`来实现父子组件之间的通信。

如果需要父组件的父组件调用子组件的数据，可以通过在子组件中定义一个`ref`，然后在父组件的父组件中通过`$refs`来访问子组件的实例，从而获取子组件的数据。具体实现步骤如下：

1.在子组件中定义一个`ref`，例如`childRef`。

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {};
  },
  methods: {
    childFun() {
      this.$emit("child-event", "子组件要传达到父组件数据");
    },
  },
};
</script>

<style lang='less' scoped>
</style>

2.在父组件中监听子组件的自定义事件，并将子组件的数据通过`$emit`方法传递给父组件。

<template>
  <div>
    <child ref="childRef" @child-event="handleChildEvent"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "parent",
  components: {
    Child,
  },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 子组件要传达到父组件数据
      console.log(this.$refs.childRef); // 子组件实例
    },
  },
};
</script>

<style lang='less' scoped>
</style>

注意：在父组件中通过`$refs`访问子组件的实例时，需要等到子组件渲染完成后才能访问，否则会返回`undefined`。可以在父组件的`mounted`钩子函数中访问子组件的实例。

vue2子组件调用父组件的方法

在 Vue 2 中，子组件想要调用父组件的方法，可以使用 `this.$parent` 或者 `$emit` 来实现。这是通过事件系统完成的：

1. **通过 $parent**:
子组件可以在需要的时候直接引用 `this.$parent`，然后访问父组件暴露的方法。例如，在子组件的模板里：

   <button @click="callParentMethod">调用父方法</button>

   <script>
   export default {
     methods: {
       callParentMethod() {
         this.$parent.parentMethod();
       }
     }
   }
   </script>

这样，当按钮被点击时，会执行 `parentMethod`。

2. **通过 $emit** (事件发射):
如果你想让父组件主动触发某个行为，通常会通过 `v-on` 或者 `@` 指令绑定到 `parent-method` 的事件上。在子组件里先发出事件：

   <button @click="emitEvent">调用父方法</button>

   <script>
   export default {
     methods: {
       emitEvent() {
         this.$emit('parent-method');
       }
     }
   }
   </script>

然后在父组件的模板里接收这个事件并处理：

   <template>
     <div>
       <child-component @parent-method="handleParentMethod"></child-component>
     </div>
   </template>

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

   export default {
     components: { ChildComponent },
     methods: {
       handleParentMethod() {
         // 处理父组件接收到的方法调用
       }
     }
   }
   </script>