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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
关于JavaScript轮播图的实现
Nov 20 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 变量的定义方法
2010/01/26 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
nohup的用法
2012/11/26 面试题
装修设计师求职信
2014/02/26 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
英文升职感谢信
2015/01/23 职场文书
小数乘法教学反思
2016/02/22 职场文书
python实现自定义日志的具体方法
2021/05/28 Python