快捷導(dǎo)航

vue props傳值失敗輸出undefined的解決方法

更新時(shí)間：2018年09月11日 10:26:55 作者：不垢

今天小編就為大家分享一篇vue props傳值失敗輸出undefined的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

如果在prop中傳的值為一個(gè)沒有使用特殊命名規(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ì)傳不過去：

<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é)：如果為駝峰命名法傳遞的話，html不區(qū)分大小寫（所有的都會(huì)轉(zhuǎn)換為小寫），所以testName 在html表現(xiàn)為：test-name ，需要注意的是vue中使用props傳遞時(shí)最好不要用橫桿如select-name 的寫法，因?yàn)槭褂玫臅r(shí)候this.select-name中的橫杠會(huì)認(rèn)為它是減號(hào)，導(dǎo)致辨認(rèn)不出來。在定義事件的時(shí)候最好命名都為小寫，如

this.$emit("selectchange","data");

不要寫成

this.$emit("selectChange","data");

html同樣認(rèn)不出來，比較好的方式是這種

this.$emit("select-change","data");

以上這篇vue props傳值失敗輸出undefined的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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