admin 管理员组文章数量: 887021
2024年1月5日发(作者：设计模式分为哪几类)
vue3子组件向父组件传值的三种方式
## Props
Props是向子组件传递父组件数据的标准方法。可将Props理解为组件的不可变数据源，子组件通过Props接收父组件的值。通过这种方式实现的组件通信非常直接和可靠。此外，通过设置Props中的type和default属性，可以对传入的数据进行验证和初始化。
```html
```
## $emit
## Provide / inject
import ChildComponent from './'
```
## 结束语除了上述提到的方法，Vue3中还有一些其他的通信方式可以实现子组件向父组件传值。
## $attrs / $listeners
$attrs和$listeners是Vue3中用于组件通信的另外两个属性。子组件可以使用$attrs获取父组件传递的所有属性值，并使用$listeners获取传入的所有事件监听器。对于一些不需要显式地定义props属性的组件，$attrs / $listeners是一种非常灵活和方便的通信方式。
```html
@customEvent="onCustomEvent">
```
EventBus或者全局事件是一种可以跨越组件层次传递数据的通信方式。这种通信方式允许子组件向任何其他组件传递事件，而不仅限于父组件。在Vue3中，可以使用Vue实例或者createApp方法创建一个全局事件总线来实现这种通信方式。
const eventBus = createApp({});
Properties.$bus = eventBus;
export default {
components: {
ChildComponent,
},
data() {
return {
message: ''
}
},
created() {
// 监听子组件发送的事件
eventBus.$on('customEventTriggered', (data) => {
e = data;
});
},
}
```
在父组件中先创建一个全局eventBus，然后通过Vue3提供的$on和emit方法分别实现监听事件和触发事件。在子组件中，使用$bus.$emit方法向其他组件发送事件。
## 结束语
Vue3提供多种方式实现组件间通信，其中子组件向父组件传值是最常用的需求之一。上述所述的方法都可以实现该功能。具体使用哪种通信方式取决于应用的具体场景。需要权衡使用方法的优点和缺点，选择合适的实现方式。## provide / inject 与 $attrs /
$listeners 的差异
在Vue3中，provide / inject和$attrs / $listeners两种通信方式是非常常用的。它们可以分别用于组件之间的跨层传递数据和事件。但是，这两种通信方式有着不同的用途和限制。
provide / inject是Vue3中的一种数据传递方式，它通过在祖先组件中提供数据，然后在子组件中注入数据来实现跨层数据传递。
需要注意的是，provide和inject本质上是依赖关系注入。当一个组件引入provide提供的数据后，它会在自己的提供者列表中增加该项依赖，这会影响组件的更新行为。在需要全局数据管理以及嵌套组件传递多层数据时，使用provide / inject会更加合适。
当提供数据的组件深层嵌套，并且数据将经常发生变化时，使用provide / inject会非常有用。但是，需要注意的是，这种通信方式需要避免出现组件之间非常紧密的耦合关系。如果组件之间的耦合关系过于紧密，则会使组件的复杂性大大增加。
$attrs / $listeners是Vue3中用于事件监听和传递数据的高级特性。这种通信方式允许子组件像外部组件发送事件，并传递属性和事件。
在子组件中，将`inheritAttrs`设置为false，$attrs / $listeners属性将不再与props合并，这样就可以通过$attrs / $listeners获取需要的数据。
这种通信方式非常适用于对props进行有效性验证和对props进行自定义修改的情况。因为在这种情况下，props的验证可以以组件内置的方式进行，无需使用provide / inject来传递验证规则。另外，如果父组件向子组件传递的所有数据中有一些无关的属性，那么可以使用$attrs / $listeners来过滤掉这些属性。
## 总结
在Vue3中，有多种方式可以实现子组件向父组件传值，比如使用props、$emit，EventBus、Provide/Inject、$attrs/$listeners等等。每种通信方式都有不同的优缺点，适用于不同的场景。在选择使用具体的通信方式时，应该根据具体的需求和场景，权衡其优缺点，选择最合适的方式。
无论使用哪种方式，我们都应该避免使用一些非正式的通信方式，例如直接修改其他组件的state，或在父组件中直接引用子组件的方法等。这些方式虽然看似简单，但往往会导致代码的混乱和不可维护性，造成更多的问题。
总之，合理使用Vue3中的组件通信方式可以提高代码的稳定性、复杂度、灵活性和可维护性。
版权声明：本文标题：vue3子组件向父组件传值的三种方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1704456302h460547.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论