继续我的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. 解决定时任务crontab运行待top的脚本

    脚本编写如: #!/bin/bash /usr/bin/top -n -1 -u mysql > /root/script/log/$(date +"%Y%m%d_%H%M%S&quo ...

  2. 使用Chloe 连接MySql服务器

    1.需要安装的依赖 Chloe Chloe.MySql MySql.Data(6.9.12) 这个版本对framework没有具体的版本要求 对于 MySql 数据库,需要安装 Install-Pac ...

  3. alt_flash_open_dev读写EPCS出现“Cannot open flash device”的解决办法

    转载 http://www.corecourse.cn/forum.php?mod=viewthread&tid=28317 在对EPCS读写操作时alt_flash_open_dev(EPC ...

  4. python pandas库总结-数据分析和操作工具

    参考:https://pandas.pydata.org/ Input/output相关函数 pandas.read_excel-将Excel文件读入pandas数据框 支持读取xls, xlsx, ...

  5. Linux系统解压zip包出现中文乱码问题

    1. 使用指定GBK编码格式进行解压可以使用如下指定编码格式进行解压. unzip -O GBK 资料.zip 或者使用CP936也是可以指定GBK编码格式进行解压 unzip -O CP936 资料 ...

  6. VsCode新建Java、SpringBoot、Python、JavaWeb项目的基本步骤

    新建Java项目 选中正上方的搜索框,按下F1快捷键,输入create Java,即可出现这样的一个命令: 选中这个: 然后为新创建的项目选择一个合适的位置就好啦! 新建SpringBoot项目 选中 ...

  7. Javaweb基础复习------EL表达式+JSTL-if&foreach

    EL表达式------简化JSP页面的Java代码 主要功能是------获取数据(语法:${data}) 举例: //ServletDemo1.java package com.example.se ...

  8. Unity绘制圆和缓动雷达图

    Unity绘制圆和缓动雷达图 之前在做UI模块的时候遇到过需要做雷达图的效果,所以简单复习了一下 关于网格绘制 我们都知道Unity绘制图形是通过Mesh网格添加顶点进行绘制,那么知道顶点信息后如何实 ...

  9. MySQL与Java常用数据类型的对应关系

    一.字符串数据类型: MySQL类型名 大小 用途 对应Java类名 char 0-255 bytes 定长字符串 (姓名.性别.学号) String varchar 0-65535 bytes 变长 ...

  10. mongo操作数据库

    1.回顾 2.node + mongodb 2.1 安装mongodb 项目中既可以使用mongodb,但是推荐使用mongoose cnpm i mongoose@4 -S 2.2 连接数据库 一定 ...