继续我的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. [C# 学习笔记]运用 GDI+ 的 Matrix 进行显示图形的平移和缩放

    C# 学习中,想尝试着做一个工控方面的上位机,可以读取CAD绘制的图形,然后把它显示出来,后面让运动控制器去走CAD里面的轨迹. 一.用netDXF 开源包,对DXF文件进行解析.解析后的直线.圆.圆 ...

  2. <context:component-scan/>和<mvc:annotation-driven/>的区别

    1 <context:annotation-config/> 如果你想使用@Autowired注解,那么就必须事先在 spring 容器中声明 AutowiredAnnotationBea ...

  3. 看看CabloyJS是如何异步加载并执行go wasm模块的

    介绍 CabloyJS提供了一个内置模块a-wasmgo,将go wasm模块的异步加载运行机制进行了封装,使我们可以非常方便的在CabloyJS项目中引入go wasm,从而支持更多的业务场景开发 ...

  4. 【c语言】整数拆分

    将一个正整数n拆分成若干个正整数的和(至少两个数,n<=100). 输入格式: 一个正整数n 输出格式: 若干行,每行一个等式(数与数之间要求非降序排列).最后一行给出解的总个数 输入样例: 在 ...

  5. python os模块总结-目录、文件操作工具

    os (operating system)是python标准库中的操作系统接口,提供了很多与操作系统进行交互的函数,可快速对目录.文件进行操作. 下面我将在C:\Users\Administrator ...

  6. GO语言学习笔记-包结构篇 Study for Go ! Chapter eight - Package Structure

    持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...

  7. 驱动开发:配置Visual Studio驱动开发环境

    在正式开始驱动开发之前,需要自行搭建驱动开发的必要环境,首先我们需要安装Visual Studio 2013这款功能强大的程序开发工具,在课件内请双击ISO文件并运行内部的vs_ultimate.ex ...

  8. VsCode里面在JavaWeb项目里面配置Maven环境详解

    1.在之前已经新建完成一个JavaWeb项目的基础上开始 2.设置里面搜索Maven,找到这个,然后进行定位 3.将Tomcat Server配置进去(右上角有一个加号) (对于已经学过Java的并不 ...

  9. 如何规避MyBatis使用过程中带来的全表更新风险

    作者:京东零售 贾玉西 一.前言 程序员A: MyBatis用过吧? 程序员B: 用过 程序员A: 好巧,我也用过,那你遇到过什么风险没?比如全表数据被更新或者删除了. 程序员B: 咔,还没遇到过,这 ...

  10. 马志强:语音识别技术研究进展和应用落地分享丨RTC Dev Meetup

    本文内容源自「RTC Dev Meetup 丨语音处理在实时互动领域的技术实践和应用]的演讲分享,分享讲师为寰语科技语音识别研究主管马志强. 01 语音识别技术现状 1.语音成为万物互联时代人机交互关 ...