快捷導(dǎo)航

Vue中props的使用詳解

更新時間：2018年06月15日 16:53:11 作者：南北北南

props屬性是父子組件之間的通信橋梁。這篇文章主要介紹了Vue中props的使用,需要的朋友可以參考下

props屬性是父子組件之間的通信橋梁。何為父子組件？從子組件的觀點(diǎn)來看，他的上一級實(shí)例或組件即為他的父組件。我們知道，處于安全考慮，組件模板里我們無法直接使用父組件的data數(shù)據(jù)，使用props這個屬性可以將父組件的數(shù)據(jù)傳給子組件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的測試</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <Child message="父組件的message,我把他的內(nèi)容重新定義了，但是父組件不會發(fā)生改變哦，因?yàn)闆]有綁定，哈哈！！"></Child>
  <hr />
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message'],
    template: '<span>{{ message }}</span>'
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的測試'
    }
  });
</script>
</body>
</html>

代碼效果圖

在子組件中對父組件的數(shù)據(jù)進(jìn)行處理。父組件的數(shù)據(jù)通過props傳入子組件以后，在子組件中也可對數(shù)據(jù)進(jìn)行相關(guān)處理，包括計算屬性、data屬性等。這樣當(dāng)子組件需要對數(shù)據(jù)進(jìn)行處理時，避免了直接在父組件中對數(shù)據(jù)進(jìn)行操作，而且由于props數(shù)據(jù)流單向性，在子組件中更改數(shù)據(jù)時，不會對父組件的數(shù)據(jù)產(chǎn)生影響。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的測試</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message','todos'],
    template: '<span>{{ test }}</span>',
    computed: {
      test: function(){
        return this.message.trim().toUpperCase();
      }}
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的測試'
    }
  });
</script>
</body>
</html>

代碼效果圖

prop的驗(yàn)證

我們可以為組件的 prop 指定驗(yàn)證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會發(fā)出警告。這對于開發(fā)給他人使用的組件非常有用。

要指定驗(yàn)證規(guī)則，需要用對象的形式來定義 prop，而不能用字符串?dāng)?shù)組

Vue.component('example',{
  props: {
    propA: String,
    propB: [Number,String]
}
});

總結(jié)

以上所述是小編給大家介紹的Vue中props的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解Vue3子組件向父組件傳遞消息
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue通過element樹形控件實(shí)現(xiàn)樹形表格
這篇文章主要為大家介紹了vue?element樹形控件實(shí)現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
element可編輯表格驗(yàn)證問題解決
本文主要介紹了element可編輯表格驗(yàn)證問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Element框架el-tab點(diǎn)擊標(biāo)簽頁時再渲染問題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁時再渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
vue中動態(tài)修改animation效果無效問題詳情
這篇文章主要介紹了vue中動態(tài)修改animation效果無效問題詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
Vue中key的原理以及diff算法詳解
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
VUE項(xiàng)目運(yùn)行失敗原因及解決辦法圖解(以vscode為例)
記錄一下踩坑,前幾天從同事手上接手了一個Vue的項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目運(yùn)行失敗原因及解決辦法的相關(guān)資料,本文以vscode為例,需要的朋友可以參考下
2023-06-06
Vue extend使用示例深入分析
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue2.x和Vue3.x的雙向綁定原理詳解
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11