vue props傳值失敗 輸出undefined的解決方法
如果在prop中傳的值為一個(gè)沒(méi)有使用特殊命名規(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>
而當(dāng)這個(gè)變量為駝峰命名法如：（selectName）,就會(huì)傳不過(guò)去：
<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標(biāo)簽改為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é)：如果為駝峰命名法傳遞的話(huà)，html不區(qū)分大小寫(xiě)（所有的都會(huì)轉(zhuǎn)換為小寫(xiě)），所以testName 在html表現(xiàn)為 ：test-name ，需要注意的是vue中使用props傳遞時(shí)最好不要用橫桿如select-name 的寫(xiě)法，因?yàn)槭褂玫臅r(shí)候this.select-name中的橫杠會(huì)認(rèn)為它是減號(hào)，導(dǎo)致辨認(rèn)不出來(lái)。在定義事件的時(shí)候最好命名都為小寫(xiě)，如
this.$emit("selectchange","data");
不要寫(xiě)成
this.$emit("selectChange","data");
html同樣認(rèn)不出來(lái)，比較好的方式是這種
this.$emit("select-change","data");
以上這篇vue props傳值失敗 輸出undefined的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案
這篇文章主要介紹了vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過(guò)JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過(guò)代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue select組件的使用與禁用實(shí)現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
Vue路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的示例，重點(diǎn)在于切換路由的時(shí)候,重新拉取列表數(shù)據(jù)，接下來(lái)看看實(shí)現(xiàn)方法吧2021-05-05
解決vue頁(yè)面刷新，數(shù)據(jù)丟失的問(wèn)題
這篇文章主要介紹了解決vue頁(yè)面刷新，數(shù)據(jù)丟失的問(wèn)題，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細(xì)的分析了vue2與vue3的常見(jiàn)區(qū)別與使用方法,需要的朋友可以參考下2023-06-06