vue props传值失败 输出undefined的解决方法


Posted in Javascript onSeptember 11, 2018

如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:

<code class="language-html"><div id="app"> 
<test :type="type"></test> 
</div> 
Vue.component("test", { 
  props: ['type'], 
  template: '<div @click="a">我是按钮{{type}}</div>', 
  methods: { 
   a() { 
    console.log(this.type); 
   } 
  } 
 }); 
var app = new Vue({ 
 el: '#app', 
 data: { 
 type: 'test' 
 } 
});</code>

而当这个变量为驼峰命名法如:(selectName),就会传不过去:

<div id="app">
<test :selectName="selectName"></test>
</div>
Vue.component("test", {
  props: ['selectName'],
  template: '<div @click="a">我是按钮{{selectName}}</div>',
  methods: {
   a() {
    console.log(this.selectName);
   }
  }
 });
var app = new Vue({
 el: '#app',
 data: {
 selectName: 'test'
 }
});

解决方法是把selectName标签改为select-Name:

<div id="app">
<test :select-Name="selectName"></test>
</div>
Vue.component("test", {
  props: ['selectName'],
  template: '<div @click="a">我是按钮{{selectName}}</div>',
  methods: {
   a() {
    console.log(this.selectName);
   }
  }
 });
var app = new Vue({
 el: '#app',
 data: {
 selectName: 'test'
 }
});

总结:如果为驼峰命名法传递的话,html不区分大小写(所有的都会转换为小写),所以testName 在html表现为 :test-name ,需要注意的是vue中使用props传递时最好不要用横杆如select-name 的写法,因为使用的时候this.select-name中的横杠会认为它是减号,导致辨认不出来。在定义事件的时候最好命名都为小写,如

this.$emit("selectchange","data");

不要写成

this.$emit("selectChange","data");

html同样认不出来,比较好的方式是这种

this.$emit("select-change","data");

以上这篇vue props传值失败 输出undefined的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
node使用request请求的方法
Dec 20 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
解决vue props 拿不到值的问题
Sep 11 #Javascript
vue首次赋值不触发watch的解决方法
Sep 11 #Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 #Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 #Javascript
详解webpack模块加载器兼打包工具
Sep 11 #Javascript
webpack css加载和图片加载的方法示例
Sep 11 #Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解js中Array的方法及技巧
2018/09/12 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
Python文件处理
2016/02/29 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python虚拟环境完美部署教程
2019/08/06 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
党校培训自我鉴定
2014/02/01 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
怎么用Python识别手势数字
2021/06/07 Python