父级和后代之间数据通信

1. 直接传递

父传子

props

props只有传递字符串的时候直接传递，其他类型的值都要用v-bind,如

1
2


<child title="子组件"/>
<child :title="{name:'子组件',date='20230719'}"

子传父

自定义函数

有参数

1
2
3
4
5
6


// 子组件
this.$emit（'test',childParam)"
// 父组件中,parentParam为父组件传递到自定义函数中的参数，如无可不传
<child @test="test($event,parentParam)" />
//如果子组件传出多个参数，父组件可用数组接收：
<child @test="test(paramsArr,parentParam)"/>

参考：(63条消息) vue $emit()传参接收方式_$emit传参_黑莲烈焰使的博客-CSDN博客

2.多级传递

1. 使用父级组件中的公共方法或属性

inject,provide

父组件中：

1
2
3
4
5


export default {
  provide: {
    SomethingAllDescendantsNeed
  }
}

后代组件中：无论层级多么深都可以访问到

1
2
3
4
5
6


export default {
  inject: ['SomethingAllDescendantsNeed'],
  mounted() {
    console.log(this.SomethingAllDescendantsNeed);
  }
}

透传

![[图片1.png]] 参考：vue中封装组件利器：$attrs、$listeners的使用 - 掘金 (juejin.cn) 使用场景：vue中的 v-bind="$attrs" v-on="$listeners"个人见解 - 掘金 (juejin.cn)

3.直接访问

使用this.$parent和this.$children可以直接访问父组件或子组件中的属性或方法。注意💥

然而，这是绝对的、可怕的、卑鄙的、可怕的想法。如果你发现自己处于需要这样做的情况，那么有 99.99958% 的可能性你做错了什么，应该重构。因为您在父组件和子组件之间的标记中的实现和结构之间引入了直接耦合，使它们变得不灵活且非常容易被破坏。

理清Vue.js状态管理及使用场景

父级和后代之间数据通信

1. 直接传递

父传子

props

子传父

自定义函数

2.多级传递

1. 使用父级组件中的公共方法或属性

inject,provide

透传

3.直接访问

子孙之间数据通信