使用Vue 父组件获取子组件的值方法总结

Vue作为一款流行的前端框架，能够简化我们开发过程中的很多操作，其中包括如何在父组件中获取子组件的值。本文将从多个方面详细阐述如何通过Vue父组件获取子组件的值。

一、使用ref属性获取子组件

最简单的方法是利用Vue的ref属性，通过指定子组件的ref属性来获取该组件的引用，从而在父组件中调用子组件的方法或者获取子组件中的变量。 ```html <script> import childComponent from './ChildComponent.vue'; export default { components: { childComponent }, methods: { handleBtnClick() { console.log(this.$refs.child.msg); } } } </script> ``` 在上述代码中，我们将子组件通过ref属性指定为child，并在父组件中调用$refs来获取子组件的引用。通过 $refs.child.msg 获取子组件中的msg属性的值。

二、使用事件来传递数据

Vue中组件之间的数据传递是可以通过父子组件之间的事件来完成的，即父组件通过event来向子组件传递数据，而子组件通过$emit实例方法来向父组件触发事件来传递数据。 ```html <script> export default { methods: { handleBtnClick() { this.$emit('myEvent', 'hello world'); } } } </script> ``` ```html <script> import childComponent from './ChildComponent.vue'; export default { components: { childComponent }, data() { return { message: '' } }, methods: { handleEvent(msg) { this.message = msg; } } } </script> ``` 在子组件中，我们通过 this.$emit('myEvent', 'hello world') 触发 myEvent 事件并传递了一个字符串参数 'hello world'，在父组件中则是通过 @myEvent="handleEvent" 监听 myEvent 事件，并将触发该事件时传递的数据 msg 赋值给父组件的message属性。

三、使用v-model双向绑定数据

Vue中，我们也可以通过 v-model 来实现子组件向父组件的数据双向绑定。 ```html <script> export default { props: { value: String }, watch: { value(newValue) { this.$emit('input', newValue); } } } </script> ``` ```html <script> import childComponent from './ChildComponent.vue'; export default { components: { childComponent }, data() { return { message: '' } } } </script> ``` 在子组件中，我们将父组件中传递的value值通过v-model绑定到输入框上，并在watch中监听value值的改变并通过 $emit('input', newValue) 触发input事件，这样父组件中v-model绑定的message值也会随之更新。

四、使用provide/inject API

Vue中还提供了一种高级的数据传递方式——provide/inject API，在Vue2.2.0版本中被引入。它通过父组件provide的数据可以被子组件inject获取到，可以实现任意层级的组件之间的数据传递。 ```html <script> import childComponent from './ChildComponent.vue'; export default { components: { childComponent }, provide() { return { message: 'hello world' } } } </script> ``` ```html <script> export default { inject: ['message'] } </script> ``` 在上述代码中，我们通过provide返回一个对象，子组件通过inject指定需要注入的数据的名称，并在模版中使用{{ message }}来获取该数据。

五、通过$parent获取父组件实例

最后还有一种容易被忽略的方式，那就是使用$parent属性获取父组件的实例。通过该属性可以任意访问父组件的属性和方法。 ```html <script> export default { methods: { handleBtnClick() { const value = this.$parent.message; console.log(value); } } } </script> ``` 在子组件中，我们可以通过此方式访问父组件的message属性值。

总结

Vue提供了多种方法供父组件获取子组件的值，其中最常用的方式是使用ref属性，通过指定子组件的ref属性来获取该组件的引用。除此之外，还可以使用事件的方式、v-model双向绑定数据、provide/inject API以及$parent属性等方式来实现数据传递。开发者可以根据实际使用场景来选择不同的方式。