Vue 中父组件如何修改子组件属性

在 Vue 开发中，父子组件之间的通信是一项重要的技能。其中，父组件修改子组件属性是常见的需求。下面我们来深入探讨这一过程。

要在 Vue 中实现父组件修改子组件属性，需要明确父子组件的关系。通常，我们在父组件的模板中引入子组件，并通过属性绑定来传递数据。例如，在父组件 Parent.vue 中：

<template>
  <div>
    <Child :childProp="parentData"></Child>
    <button @click="updateChildProp">修改子组件属性</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: '初始数据'
    };
  },
  methods: {
    updateChildProp() {
      this.parentData = '更新后的数据';
    }
  }
};
</script>

在子组件 Child.vue 中：

<template>
  <div>{{ childProp }}</div>
</template>

<script>
export default {
  props: {
    childProp: String
  }
};
</script>

这里，通过 :childProp="parentData" 将父组件的数据 parentData 传递给子组件的 childProp 属性。当点击按钮触发 updateChildProp 方法时，父组件的 parentData 数据更新，子组件的 childProp 属性也会随之更新，因为 Vue 的响应式原理会自动检测到数据的变化并更新视图。

另一种情况，如果子组件有自己的内部状态，而父组件需要修改这个状态对应的属性。可以在子组件中定义一个方法来修改属性，然后在父组件中通过 $refs 来调用这个方法。比如在子组件 Child.vue 中添加一个方法：

<template>
  <div>{{ childProp }}</div>
</template>

<script>
export default {
  props: {
    childProp: String
  },
  methods: {
    updateInternalProp(newValue) {
      this.childProp = newValue;
    }
  }
};
</script>

在父组件 Parent.vue 中使用 $refs 调用这个方法：

<template>
  <div>
    <Child ref="childRef" :childProp="parentData"></Child>
    <button @click="updateChildInternally">从父组件修改子组件内部属性</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: '初始数据'
    };
  },
  methods: {
    updateChildInternally() {
      this.$refs.childRef.updateInternalProp('新的内部属性值');
    }
  }
};
</script>

通过上述两种方式，我们能够灵活地实现父组件对 子组件属性的修改，从而更好地构建复杂的 Vue 应用程序，提升开发效率和应用的可维护性。