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

2019-11-19 12:58:35

字体：大中小

来源：转载

供稿：网友

如果在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中的横杠会认为它是减号，导致辨认不出来。在定义事件的时候最好命名都为小写，如