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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
解决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对数组排序的简单实例
2013/12/25 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python Http请求json解析库用法解析
2020/11/28 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
简历中自我评价怎么写
2014/02/12 职场文书
服务质量承诺书
2014/03/27 职场文书
移风易俗倡议书
2014/04/15 职场文书
保护水资源的标语
2014/06/17 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL