vue props傳值失敗 輸出undefined的解決方法
更新時間：2018年09月11日 10:26:55 作者：不垢
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果在prop中傳的值為一個沒有使用特殊命名規(guī)則的變量如:（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'
}
});
總結(jié)：如果為駝峰命名法傳遞的話，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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element-UI的el-table組件是一個非常強大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下2024-05-05
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現(xiàn)表單元素校驗時，出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)點擊按鈕倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
我們在vuex中操作數(shù)據(jù)時遇見視圖不更新的情況,下面這篇文章主要給大家介紹了關(guān)于vuex更新視圖引發(fā)的一些思考,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
el-table?選中行與復選框相互聯(lián)動的實現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復選框相互聯(lián)動,分為兩步，第一步點擊行時觸發(fā)復選框的選擇或取消，第二步點擊復選框時觸發(fā)相應(yīng)行的變化，本文通過實例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫h5頁面的方法以及注意點分析，有需要的朋友們跟著學習下吧。2019-02-02
這篇文章主要介紹了vant如何修改placeholder樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue3中使用vuex和vue-router的步驟，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
解決mpvue + vuex 開發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用問題
這篇文章主要介紹了解決mpvue + vuex 開發(fā)微信小程序 vuex輔助函數(shù)mapState、mapGetters不可用問題,需要的朋友可以參考下2018-08-08
Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10