父组件传值,子组件监听,明明很简单的一个事情,硬是卡了许久(毕竟不是专业搞前端的,还是吃亏在学识浅陋)。也和自己钻牛角尖有关,想自己解决问题。

  早期我写过一篇vue组件传值的文章,传值方式是这样的:

  

  官网的简单实例也是这样的:

  

   用中括号包含参数即可,至于参数是什么类型,你传值的时候给就行了,用的时候直接用。因为JS是弱类型语言,这块可以不指定参数类型。

   当然,也可以指定,今天遇到的问题就在于这个指定了参数类型。先看官网对于参数类型的描述:

   

    然后是做法:

    

        下午的卡壳就在这个type上, 之前写js习惯了弱类型var的运用,不太习惯去指定这里的type,导致传递了一个对象没有被接收。无语了~

     知道为什么以后事情做起来就容易很多了:

     

     不纠结类型, 直接传过来就完事,怎么用我肯定知道,毕竟是自己写的参数。这样的好处是在配合watch事件使用时贼方便,哪怕你给子页面赋值报错了,也没事,改正就好了,重点是什么,是这样做watch事件不会因为类型错误而无法触发!!这个坑太深.... 正常来讲参数只要传了,变化了,watch事件时可以监听到的,但是我这里类型给错了直接导致watch事件不触发,页面也不报错,得硬看代码逐行调试才知道为什么。所以说有时候报错是好的, 错误信息能帮助你定位问题,而最可怕的问题反而是什么错也没有,功能出不来,这真的令人抓狂。

        当然了, 参数是否指定类型以及是否给予默认值,这个得由开发者来决定,有时候还要看项目具体情况,我这里只是吐槽一下刚刚踩到的坑。网上也有其他的一些诸如watch事件不触发的问题,但我想估计没我这个坑, 可能有的人也遇到类似的问题吧。

     

vue props传值后watch事件未触发的问题的更多相关文章

  1. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  2. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  3. vue props传值方法

    <template> <div class="hello"> <ul> <li v-for="(item, index) in ...

  4. EasyUi中的datagird中a标签的click事件无法触发?(已解决)

    ***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...

  5. U3D自定义Inspector项未触发保存事件的解决方案

    1.问题描述与解决方案 1.1.说明 应该只有起步做U3D编辑器插件的部分同行需要了解本文. 该问题源于在做UI插件的时候,发现Inspector面板上手动修改值后,没有触发U3D编辑器本身的修改事件 ...

  6. Vue:渲染、指令、事件、组件、Props、Slots

    如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 ...

  7. Vue:渲染、指令、事件、组件、Props

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工 ...

  8. vue props 下有验证器 validator 验证数据返回true false后,false给default值

    vue props 下有验证器 validator 验证数据返回true false后,false给default值 props: { type: { validator (value) { retu ...

  9. HTML 颜色输入框修改事件的触发,以及获取修改后的颜色

    HTML 颜色输入框修改事件的触发,以及获取修改后的颜色 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. 前端开发 Vue -3axios

    Axios是什么? 应该念“阿克希奥斯”……但是太长太拗口,我一般念“阿笑斯”…… Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.po ...

  2. css:display:grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  3. 表格中的DOM

    通过DOM来操作table跟在html中操作table是不一样的,下面来看看怎样通过DOM来操作table. 按照table的分布来创建: <table> <thead> &l ...

  4. stm32 PWM

    脉冲宽度调制是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术 高级定时器可以同时产生多达7路的PWM输出 而通用定时器也能同时产生多达4路的PWM输出 脉冲宽度调制模式可以产生一个由T ...

  5. Sqlmap对dvwa进行sql注入测试

    前提准备条件: 1.下载安装dvwa,下载链接地址:http://www.dvwa.co.uk/.2.需要安装python运行环境.3.下载sqlmap包并将其解压. 一.查看所有的数据库;(其中db ...

  6. 异常-Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at line 1, column 596. Encountered: <EOF> after :

    1 详细异常 Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at ...

  7. AcWing 246. 区间最大公约数

    246. 区间最大公约数 思路: 首先根据更相减损术,我们得到一个结论: \(gcd(a_l, a_{l+1}, ...,a_r) = gcd(a_l, a_{l+1}-a_l, a_{l+2}-a_ ...

  8. sklearn逻辑回归实战

    目录 题目要求 ex2data1.txt处理 方案一:无多项式特征 方案二:引入多项式特征 ex2data2.txt处理 两份数据 ex2data1.txt ex2data2.txt 题目要求 根据学 ...

  9. 大数据之路week05--day01(I/O流阶段一 之File)

    众所周知,我们电脑中有许许多多的文件夹和文件,文件的形式也有许多不同的格式,文件夹中也可以新建文件夹的存在,也就是多层的一步一步的嵌套. 我们想要实现I/O操作,就必须知道硬盘上文件的表现形式. 而J ...

  10. JAVA遇见HTML——JSP篇:JSP内置对象(下)

    什么是session session表示客户端与服务器的一次会话 Web中的session指的是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间 从上述 ...