继续我的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. nginx配置权重,ip_hash....

    nginx为后端web服务器(apache,nginx,tomcat,weblogic)等做反向代理 几台后端web服务器需要考虑文件共享,数据库共享,session共享问题.文件共享可以使用nfs, ...

  2. 实验4_开源控制器实践——OpenDaylight

    基础要求 需要提交两张图, 一是Mininet拓扑生成并连接控制器的结果 二是Mininet中ping测试截图,并体现个人信息 进阶要求 1.获取拓扑的交换机 2.获取流表状态数量 3.获取指定交换机 ...

  3. 6. 基础查(会员信息) - 创建查询Web Api - 配置Table Permission

    ​ Power Portal中的Web API可以对门户页面中所有的Microsoft Dataverse实体进行创建.更新和删除操作.我们可以直接使用门户Web API对产品创建新客户.更新联系人或 ...

  4. PXE(cobbler)搭建,自动系统安装

    pxe pxe实现全自动安装操作系统,其中用到的软件包括(dhcp首先给客户端分配IP地址提供的系统引导安装系统指向tftp-server启动并加载网络repo仓库由http服务和系统镜像制作) dh ...

  5. (续)关于jsp的小细节们

    (续集) 细节四:在浏览界面,点击主键对应的数据时,会跳转到其详细信息界面 这样就实现跳转详情页面啦!(jsp再进入一个servlet文件,获取到当前主键的值,然后再传回到另一个jsp文件,就可以实现 ...

  6. Kustomize 生产实战-注入监控 APM Agent

    Kustomize 简介 Kubernetes 原生配置管理工具, 它自定义引入了一种无需模板的方式来定制应用程序配置,从而简化了对现成应用程序的使用.目前,在kubectl中内置了,通过 apply ...

  7. 开发者实践丨Agora Home AI 音视频的未来

    本文作者是本届 RTE 2021 创新编程挑战赛获奖者,来自上海交通大学的李新春.他分享了本次参赛作品的构思.系统设计和开发的心得. 01 不得忽略的背景 从国家层面上讲,十四五期间我国人工智能发展的 ...

  8. 自己动手从零写桌面操作系统GrapeOS系列教程——23.从硬盘读取文件

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 本讲代码文件为boot.asm,要读取的文件为data.txt. 一.在FAT16系统中读取文件的流程 在GrapeOS中用到的文件少且小,所有 ...

  9. PHP微信三方平台-微信支付(扫码支付)

    1.官方文档地址: https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1 2.逻辑分析: 生成支付二维码->用户扫码支付-& ...

  10. wireshark抓包教程详解

    https://blog.csdn.net/lixinkuan328/article/details/122985439 Wireshark 的抓包和分析,看这篇就够了!:https://blog.c ...