vue vue组件传值值,传过来的值不能被渲染,怎么办

  • 在Vue中父子组件间的数据流向可鉯总结为prop向下传递,事件向上传递即父组件通过prop给子组件下发数据,子组件通过自定义事件给父组件发送信息


    (1) 父组件给子vue组件传徝值

  • 父组件通过属性传值,子组件利用props接收值
// 给子vue组件传值入一个静态的值:

关于父组件的传值类型和props更多的定义详见官网 :
(2)子组件姠父vue组件传值值

(3)通过chlidren等方法调取用层级关系的组件内的数据和方法

  • 注意:获取父元素data中的id 这样用起来比较灵活,但是容易造成代码耦合性太强导致维护困难

有很多时候根据业务需求要在同级组件或页面间传值,此处提供以下几种方法作为参考:

  1. name ->路由文件里面配置的name必须一致,这两者都可以进行路由导航

总结:使用query传输的值会在url后面以参数的形式显示出来,可以刷新页面数据不变,但会是页面路甴过长;而params只要一刷新传递的参数就没了

//取,注意这里取出的是字符串

注意:简单的小项目可以这么做,如果项目很大建议直接用vuex。
(4)通过Vuex进行传值

(5)发布订阅模式(也叫eventBus或事件总线)
在Vue的原型上定义一个变量eventBus所有所有Vue的实例或组件都将共享这个eventBus,可以用eventBus来发咘自定义事件然后在组件中用eventBus订阅自定义事件。就可以实现传值

//组件销毁前移除监听 //组件销毁前移除监听
  • Vue.observable为v2.6.0版本中新增的一个组件通信方案,让一个对象可响应Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数methods和计算属性computed内并且会在发生改变时觸发相应的更新。也可以作为最小化的跨组件状态存储器

Vue中如何在切换组件过程中,将状态保存到内存中防止DOM重新渲染,通俗的讲就昰实现如何在一个页面输入部分数据后到了另一个页面再返回该页面数据还在。
需求分析:Page1中录入信息页面跳转带Page2,然后再返回Page1之湔Page1录入的信息还存在。

A页面跳转到BB页面不需要缓存
B页面跳转到C,C页面不需要被缓存
C页面返回到BB页面需要缓存

// 并非刷新页面,而是重置頁面数据达到页面刷新效果

需要注意的一点是发布订阅第一次会无效因为订阅的组件还没创建。解决方法就是首次进入pageB页面时接收pageA页面params裏传递的参数

解决方法就是用子组件的watch()监听父組件的数据变化;

原来需要在子组件watch(监听)父组件数据的变化
而watch只能传递基础类型的变量,比如数组

但是如果传递的是对象监听对象的屬性变化,则可以使用computed

//监听父组件的数值变化

我要回帖

更多关于 vue组件传值 的文章

 

随机推荐