快速了解Vue父子组件传值以及父调子方法、子调父方法

Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 中，父子组件间的通信是构建复杂应用的关键。本文将深入探讨Vue父子组件之间的数据传递和方法调用。 1. **父传值给子组件** 在Vue中，父组件向子组件传递数据主要通过`props`属性实现。首先在父组件的模板中，我们使用`:propName`（或`v-bind:propName`）将数据绑定到子组件的属性上。例如，父组件模板： ```html <child :sid="id"></child> ``` 这里的`:sid`是子组件的`prop`，`id`是父组件的数据。然后在子组件中定义对应的`props`： ```js export default { props: { sid: { type: String, default: '0' } }, // ... } ``` 这样，父组件的`id`值就会被传入子组件，子组件可以通过`this.sid`访问这个值。 2. **子传值给父组件** 子组件向父组件传递数据通常使用`$emit`事件发射器。在子组件中，我们创建一个方法触发`$emit`，比如： ```js methods: { valueClick() { this.$emit('passVaule', 19); } } ``` 这里的`passVaule`是自定义事件名，`19`是要传递的值。在父组件中，我们需要监听这个事件并定义相应的处理函数： ```html <child @passVaule="passValue"></child> ``` ```js methods: { passValue(data) { this.childSia = data; } } ``` 这样，当子组件触发`passVaule`事件时，父组件的`passValue`方法会被调用，并接收子组件传递的值。 3. **子调用父组件中的方法** 子组件调用父组件的方法同样通过`$emit`。子组件定义一个方法触发`$emit`： ```js methods: { funClick() { this.$emit('funVaule'); } } ``` 父组件监听这个事件并定义对应的方法： ```html <child @funVaule="funValue"></child> ``` ```js methods: { funValue() { console.log('调用了父组件中的函数'); } } ``` 4. **父调用子组件中的方法** 父组件直接调用子组件的方法需要借助`refs`。在子组件模板中添加`ref`属性： ```html <child ref="childRef"></child> ``` 然后在父组件中，可以使用`this.$refs.childRef`来引用子组件实例，调用其方法： ```js methods: { childCli() { this.$refs.childRef.childMethod(); } } ``` 在子组件中定义`childMethod`方法： ```js methods: { childMethod() { console.log('子组件的方法被调用了'); } } ``` 以上就是Vue父子组件之间数据传递和方法调用的基本操作。在实际开发中，这些技巧能够帮助构建更灵活、可复用的组件结构。但需要注意的是，尽量避免父子组件过于紧密耦合，以提高组件的独立性和可测试性。同时，使用`props`向下传递数据时，要遵循单向数据流原则，即数据应由父组件流向子组件，而子组件不应直接修改父组件的状态。