继续我的vue踩坑之旅。。。

  电商网站都会有搜索栏,输入内容后在搜索结果页面要带入搜索的关键字,需求就从这里来。代码如下:

  <v-search :keyword="this.$route.query.keyword"></v-search>
这里把搜索的关键字(keyword)传过来。
这里接收参数,

这里展示。

然后就报错了,具体内容为:

看了一下是props的问题。报错内容的前一句指出:父组件会修改props中的数据。
  扒了一下官方文档,专门有讲解的,叫做单向数据流:

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

如果想要改变,可以根据情况选择计算属性或者在data中重新定义(其实浏览器报错的后半段就是这么说的)。所以改成了这样:

 运行OK。
  总结:要多看并且理解官方文档,就像长者说的,要提高自己的知识水平啊!还有就是认真看报错信息。
 这样的低级错误要尽量避免啊。。。 
 

VUE旅程(2)的更多相关文章

  1. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  2. 基于Vue的WebApp项目开发(五)

    实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...

  3. shiro vue 前后端分离中模拟登录遇到的坑

    系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...

  4. vue 学习 渲染、v-指令

    vue渲染 在组件中data是一个方法里面的值要是一个对象return出去 export default { name: "HelloWorld", data() { return ...

  5. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  6. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. MQ(为什么要使用MQ)

    为什么使用MQ? 个人认为主要由几下几点: 1.在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达数据库,直接导致无数的行锁表锁,甚至最 ...

  2. Windows11右键改Win10

    Win11改Win10右键模式 1.以管理员身份运行CMD控制台 2.在控制台中输入下列代码后回车执行 reg add "HKCU\Software\Classes\CLSID\{86ca1 ...

  3. ubuntu手动创建快捷方式

    新建document,重命名为XXX.desktop,打开文件 以sublime为例,填写 [Desktop Entry] Version=1.0 Type=Application Name=Subl ...

  4. adb命令2

    1.获取手机型号指令 adb shell cat /system/build.prop | findstr "ro.product.model" 2.获取手机处理器信息 adb s ...

  5. CSS pointer-events 属性

    pointer-events 属性用于设置元素是否对鼠标事件做出反应. CSS 语法 pointer-events: auto|none; 属性值 属性值 描述 auto 默认值,设置该属性链接可以正 ...

  6. 使用go的并发性来解决Hilbert酒店问题

    译自:Designing for Concurrency: the Hilbert's Hotel Problem in Go,本文使用go的并发性来解决Hilbert酒店问题.本文比较有意思的是它对 ...

  7. ROS话题通信C++(附launch启动方式)

    ROS话题通信C++(附launch启动方式) 创建工作空间 mkdir -p topic_ws/src cd topic_ws catkin_make 设置环境变量 source ./devel/s ...

  8. 虚拟办公、虚拟展会、虚拟偶像,RTE+XR 还能做什么?

    2021年6月10日,HTC VIVE 在北京举办以"融合·至界"为主题的新品体验会暨开发者客户大会.近 300 位 XR 行业精英齐聚一堂,共同见证了 HTC VIVE 全能 V ...

  9. PicGo + Gitee(码云)实现markdown图床 (转载)

    https://zhuanlan.zhihu.com/p/102594554 备忘录 我配置图床的时候参考的是这篇文章.我暂时使用的是这种方案. 因为考虑到有的文章要多平台发布,我建议你选择markd ...

  10. JVM 重点知识归纳

    JVM(Java Virtual Machine:译为 Java虚拟机)内核: 通常指通过软件模拟的具有完整硬件系统功能的运行在一个完全隔离环境汇总的完整计算机系统.如下:  ■  Mware/Vis ...