继续我的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. loadrunner入门(关联)

    左右边界:提取第一个id web_reg_save_param_ex(                 "ParamName=Id",         "LB=//OK[ ...

  2. python多线程获取线程执行结果

    In [1]: from threading import Thread def fun(t): """ //执行函数体 //t:时间 """ ...

  3. Java输入与输出语句详细解析

    前言 我们在前面的文章中,学习了如何创建Java文件,也学习了Java里的标识符.运算符.进制等内容.有些同学觉得还不够过瘾,给壹哥发来了好多私信,期待我能够把进度更新的再快一点.这不,新内容这就给大 ...

  4. Java面试——Java基础

    更多内容,移步IT-BLOG 一.JAVA中的几种基本数据类型 Java语言中一共提供了8种原始的数据类型(byte,short,int,long,float,double,char,boolean) ...

  5. 制作一个同时具有PE和Windows原版安装方式的U盘

    这个方法可能很多人已经制作成功过了,但是呢,也有些人不会的,也可能没想到过,那就是让Win PE与Windows原版安装包在一个U盘里面同时共存. 需要用到的软件有这几样:DiskGenius.Gim ...

  6. Java中的命名规范

    Java中的命名规范 一. 常规约定 类一般采用大驼峰命名,方法和局部变量使用小驼峰命名,而大写下划线命名通常是常量和枚举中使用. 类型 约束 例 项目名 全部小写,多个单词用中划线分隔'-' spr ...

  7. [网络]HTTPS下服务器与浏览器的通信:HTTPS背后的加密算法 | TLS := SSL [转载]

    全文转载自: HTTPS背后的加密算法 - 博客园 1 概述: 基本原理/过程 当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信.InfoQ的这 ...

  8. [J2EE:中间件]LOG4J+Slf4J快速入门及日志最佳实践

    1 概述 1.1 常见的Java日志框架及选择 commons-logging和slf4j(slf4j-api.jar)都是日志类库的接口,供客户端使用,而没有提供实现! log4j,logback等 ...

  9. dev-tools

    Maven配置依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  10. 6.理解Jwt代码

    1.昨天主要是对Jwt的代码里面不熟悉的代码进行了简要的理解,发现其实有些流程并不是普通程序员自己写的,而是自己进行拓展,这些流程是开源程序员写的开发流程:我发现这些代码一般要么是父类的方法实现,要么 ...