vue如何将父页面的数据,传给孙以及更深的组件呢?

我们在vue前端开发的过程中,经常会将一个页面拆分成多个组件来组装,但是当页面复杂的时候,可能会出现组件嵌套组件再嵌套组件...

这时候刚好有一个参数,我们在父页面获取到了,在孙组件的孙组件的....需要引用....

emmm... 要用props一层一层的传递下去嘛,这样代码显得臃肿,说不定下一个人在优化的时候,就给删掉了怎么办....这是一个很严重的问题

我们先看一下props

html 复制代码
<!-- one.vue -->
<two :message="message" />
data(){ return { message: "我是父页面的消息!" } }
html 复制代码
<!-- two.vue -->
<three :message="message" />
props(){ message: String }
html 复制代码
<!-- three.vue -->
<four :message="message" />
props(){ message: String }
html 复制代码
<!-- four.vue -->
<div>{{ message }}</div>
props(){ message: String }

这参数传递,看了直呼好家伙,真怕哪一级传着传着就丢了,真的就是我不使用参数,我只是参数的搬运工,那有没有什么方法能简化参数的传递呢?接下来我们看一下官方提供的两个钩子。

provide inject

下面是官方提供的钩子provideinject,简化了深层传递参数的方案

html 复制代码
<template> <Child /> </template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  provide() { return { message: 'hello' } }
}
</script>
html 复制代码
<template>
  <GrandChild />
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: { GrandChild }
}
</script>
html 复制代码
<template>
  <p> {{ message }} </p>
</template>
<script>
export default {
  inject: ['message']
  // inject: {
  //     message: {
  //         from: 'message', // 当与原注入名同名时,这个属性是可选的
  //         default: 'default value' 
  //     }, 
  // }
}
</script>

写在最后

当然,也有其他的方法进行传递,比如Bus的方式,存储在一个公共的区域,再进行引用和读取,或者vuex里,都是可以的,具体还是看个人取舍了。

相关推荐
Yeats_Liao3 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人8 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳13 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋14 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着15 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
潜心编码20 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
摘星编程26 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb
小白的码BUG之路26 分钟前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js
Onion32 分钟前
Vue2日历组件-仿企微日程日历
前端·javascript·vue.js
用户842981424181034 分钟前
js中如何隐藏eval关键字?
前端·javascript·后端