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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
javascript实现画板功能
Apr 12 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
把77A收信机改造成收音机
2021/03/02 无线电
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
javascript的BOM
2016/05/03 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python实战教程之自动扫雷
2018/07/13 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python魔术方法专题
2020/06/19 Python
Python容器类型公共方法总结
2020/08/19 Python
如何转换一个字符串到enum值
2014/04/12 面试题
C#面试题
2016/05/06 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
工程安全员岗位职责
2014/03/09 职场文书
个人工作表现评语
2014/04/30 职场文书
学历证明样本
2015/06/16 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python中urllib包的网络请求教程
2022/04/19 Python
Linux磁盘管理方法介绍
2022/06/01 Servers