好资源导航 » 文章资讯 » vue props传值失败输出undefined的解决方法

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

2023-09-08 07:18:05 86

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

Vue.component("test",{ props:['type'], template:'我是按钮{{type}}

', methods:{ a(){ console.log(this.type); } } }); varapp=newVue({ el:'#app', data:{ type:'test' } });

而当这个变量为驼峰命名法如：（selectName）,就会传不过去：

Vue.component("test",{ props:['selectName'], template:'我是按钮{{selectName}}

', methods:{ a(){ console.log(this.selectName); } } }); varapp=newVue({ el:'#app', data:{ selectName:'test' } });

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

Vue.component("test",{ props:['selectName'], template:'我是按钮{{selectName}}', methods:{ a(){ console.log(this.selectName); } } }); varapp=newVue({ 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");

以上这篇vueprops传值失败输出undefined的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐

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