如何解決vueprops傳值失敗輸出undefined的問題
小編給大家分享一下如何解決vue props傳值失敗輸出undefined的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,安新企業(yè)網(wǎng)站建設,安新品牌網(wǎng)站建設,網(wǎng)站定制,安新網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,安新網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
如果在prop中傳的值為一個沒有使用特殊命名規(guī)則的變量如:（type），可以順利傳值：
Vue.component("test", {
props: ['type'],
template: '
我是按鈕{{type}} ',
methods: {
a() {
console.log(this.type);
}
}
});
var app = new Vue({
el: '#app',
data: {
type: 'test'
}
});
而當這個變量為駝峰命名法如：（selectName）,就會傳不過去：
Vue.component("test", {
props: ['selectName'],
template: '我是按鈕{{selectName}}',
methods: {
a() {
console.log(this.selectName);
}
}
});
var app = new Vue({
el: '#app',
data: {
selectName: 'test'
}
});解決方法是把selectName標簽改為select-Name：
Vue.component("test", {
props: ['selectName'],
template: '我是按鈕{{selectName}}',
methods: {
a() {
console.log(this.selectName);
}
}
});
var app = new Vue({
el: '#app',
data: {
selectName: 'test'
}
});
總結：如果為駝峰命名法傳遞的話，html不區(qū)分大小寫（所有的都會轉(zhuǎn)換為小寫），所以testName 在html表現(xiàn)為 ：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的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當前名稱：如何解決vueprops傳值失敗輸出undefined的問題
本文URL：http://weahome.cn/article/gjiddg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
