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向子组件传参并触发其更新。