vue 通过 this.$refs 创建方法i向子组件传参让子组件更新

在Vue中，this.$refs主要用于访问子组件的实例或者DOM元素。通过this.$refs，你可以调用子组件的方法或者访问其数据属性，从而实现子组件的更新。以下是一些使用this.$refs向子组件传参并触发更新的常见方法：

1. 直接调用子组件的方法

如果子组件定义了一些公开的方法，你可以通过this.$refs直接调用这些方法来更新子组件的状态。

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
  <button @click="updateChild">Update Child</button>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateChild() {
      this.$refs.child.updateData('new data'); // 假设子组件有一个updateData方法
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<script>
export default {
  methods: {
    updateData(data) {
      this.someData = data; // 假设子组件内部使用了一些数据
    }
  }
};
</script>

2. 通过修改子组件的props来触发更新

Vue的响应式系统是基于数据的，你可以通过修改子组件的props来触发其更新。

<!-- 父组件 -->
<template>
  <child-component :propData="dataForChild" ref="child"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataForChild: 'initial data'
    };
  },
  methods: {
    updateChildData() {
      this.dataForChild = 'updated data'; // 改变props值，子组件将响应这一变化
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<script>
export default {
  props: ['propData']
};
</script>

3. 使用事件来传递数据

你可以在父组件中触发一个事件，并将数据作为事件参数传递给子组件，子组件监听这个事件并据此更新状态。

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
  <button @click="emitData">Emit Data to Child</button>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    emitData() {
      this.$refs.child.$emit('update', 'new data'); // 触发事件并传递数据
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    this.$on('update', (data) => {
      this.someData = data; // 使用传递的数据更新状态
    });
  }
};
</script>

注意事项

• 确保子组件的方法或数据属性是公开的，以便父组件可以访问。
• 使用this.$refs时，要确保在子组件已经挂载（mounted）之后再访问，否则可能会获取到undefined。
• 过度使用this.$refs可能会导致组件耦合度增加，考虑使用props和事件来实现父子组件间的数据传递和通信，这样可以使组件更加独立和可复用。

通过这些方法，你可以利用this.$refs向子组件传参并触发其更新。