当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue props传值失败 输出undefined的解决方法

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

红杏枝头春渐悄txt,又名荆州站长网,登堂入室缠上你txt

如果在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的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网