vue父传子、子传父、非父子组件传值

• Z时代
• 2024-01-10
• 分类：综合

1、父传子
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

子组件

父组件的代码

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可
2、子传父
子组件

子传父的实现方式就是用了 this.$emit\mathrm{来}\mathrm{遍}\mathrm{历}getData\mathrm{事}\mathrm{件}\mathrm{，}\mathrm{首}\mathrm{先}\mathrm{用}\mathrm{按}\mathrm{钮}\mathrm{来}\mathrm{触}\mathrm{发}setData\mathrm{事}\mathrm{件}\mathrm{，}\mathrm{在}setData\mathrm{中}\mathrm{用}this\mathrm{.}$emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg
父组件

3. 非父子组件进行传值

以上是 vue父传子、子传父、非父子组件传值 的全部内容， 来源链接： utcz.com/z/377227.html