快捷導(dǎo)航

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>

而當(dāng)這個變量為駝峰命名法如：（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標(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ū)分大小寫（所有的都會轉(zhuǎn)換為小寫），所以testName 在html表現(xiàn)為：test-name ，需要注意的是vue中使用props傳遞時最好不要用橫桿如select-name 的寫法，因為使用的時候this.select-name中的橫杠會認為它是減號，導(dǎo)致辨認不出來。在定義事件的時候最好命名都為小寫，如

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

不要寫成

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

html同樣認不出來，比較好的方式是這種

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

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

您可能感興趣的文章:

相關(guān)文章

詳解vue 在移動端體驗上的優(yōu)化解決方案
這篇文章主要介紹了vue 在移動端體驗上的優(yōu)化解決方案,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue中如何實現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-01-01
Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動，需要的朋友可以參考下
2023-02-02
vue路由插件之vue-route
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識，本文通過實例代碼給大家介紹了vue router的使用，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
vue select組件的使用與禁用實現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下
2018-04-04
Vue中配置使用process.env詳解
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下
2023-03-03
Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例，重點在于切換路由的時候,重新拉取列表數(shù)據(jù)，接下來看看實現(xiàn)方法吧
2021-05-05
解決vue頁面刷新，數(shù)據(jù)丟失的問題
這篇文章主要介紹了解決vue頁面刷新，數(shù)據(jù)丟失的問題，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
深入淺出分析vue2和vue3的區(qū)別
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下
2023-06-06