继续我的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. bat将多个文件夹下内容合并到一个文件夹下

    for /f "delims=" %%p in ('dir /b/ad') do copy %%p\*.* d:\all\ pause 目标文件夹 d:\all\ 最好不用中文目录

  2. 基于element-ui进行二次封装的表格组件

    <!-- * @description 表格组件 * @fileName TableList.vue * @authorQ * @date 2021/05/15 15:13:45 --> ...

  3. Spring-传统方式(XML)创建webapp

    如何搭建一个传统的webapp项目[Java后端] 使用xml 来搭建 SSM 环境,要求 Tomcat 的版本必须在 7 以上 QuickStart 1创建工程 创建一个新模块[普通的 Maven ...

  4. Javaweb学习笔记第四弹

    JDBC API详解 1.DriverManager作用: 1.注册驱动 registerDriver 2.获取数据库连接 getConnection 参数:1.url jdbc:mysql://lo ...

  5. Spring--数据库资源管理遗留问题

    遗留问题的解决 在我们要再试一试其他属性的时候,就出现了一些小问题:定义的情况下, 在.xml文件里面调用: 却发现输出是这样的: 这完全不对等啊! 之后发现是系统的值,优先级要高于我们自己配置的这个 ...

  6. 为什么 C# 可能是最好的第一编程语言

    纵观神州大地,漫游中华互联网,我看到很多人关注为什么你应该开始学习JavaScript做前端,而对blazor这样的面向未来的框架有种莫名的瞧不起,或者为什么你应该学习Python作为你的第一门编程语 ...

  7. python轮流监听多台服务器资源情况

    在主动持续监听某台服务器基础上,优化为同时监听多台服务器资源占用情况: 优点:较初版,设备监听范围有了明显提升: 缺点:主动式,轮询方式,实时性较差. #-*- coding: utf-8 -*- # ...

  8. 7个角度,用 ChatGPT 玩转机器学习

    大家好,我是机器学习科普创作者章北海mlpy,探索更高效的学习方法是我一直等追求.现在的初学者太幸福了,可以利用ChatGPT来帮助你学习机器学习的各个方面. 比如[个人首测]百度文心一言 VS GP ...

  9. SpringCloud微服务实战——搭建企业级开发框架(五十二):第三方登录-微信小程序授权登录流程设计和实现

      在前面的设计和实现中,我们的微服务开发平台通过JustAuth来实现第三方授权登录,通过集成公共组件,着实减少了很多工作量,大多数的第三方登录直接通过配置就可以实现.而在第三方授权登录中,微信小程 ...

  10. 四个常见的Linux面试问题

    四个常见的Linux面试问题. 刚毕业要找工作了,只要是你找工作就会有面试这个环节,那么在面试环节中,有哪些注意事项值得我的关注呢?特别是专业技术岗位,这样的岗位询问一般都是在职的工程师,如何在面试环 ...