Vue使用Props實現(xiàn)組件數(shù)據(jù)交互的示例代碼

更新時間：2024年06月30日 13:52:35 作者：初敘

在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實現(xiàn)組件數(shù)據(jù)交互,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下

props可以是一個數(shù)組或?qū)ο?，用于指定子組件接受的屬性名稱。通過在父組件中使用子組件時，通過屬性的方式將數(shù)據(jù)傳遞給子組件，屬性名即為在子組件中聲明的props的屬性名稱。子組件可以在其模板中通過props屬性訪問父組件傳遞的數(shù)據(jù)。props的作用是向子組件傳遞數(shù)據(jù)，允許傳遞任意數(shù)量的prop和任意類型的prop。在Vue 3和TypeScript中，深入了解組件的Props是非常重要的，因為可以在組件的選項中使用props屬性來定義Props的類型和驗證規(guī)則。

使用如下：

1、在使用子組件的父組件傳遞數(shù)據(jù)

<RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>

2、子組件數(shù)據(jù)應用，使用props確定接收數(shù)據(jù)的類型和默認值，在props中還可以進行數(shù)據(jù)校驗。

<template>
    <button @click="refreshHandle">刷新</button>
    <p>父頁面數(shù)據(jù)：{{newsRefresh}}</p>
</template>
 
<script>
export default {
    name: "RefreshBtn",
    props: {
        newsRefresh: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            target: 1
        }
    },
    methods: {
        refreshHandle() {
            this.$emit("onFreshEvent",this.target);
            this.target += 1;
        }
    }
}
</script>

props完整的校驗寫法：

props: {
  校驗的屬性名: {
    type: 類型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默認值, // 默認值
    validator (value) {
      // 自定義校驗邏輯
      return 是否通過校驗
    }
  }
},

<script>
export default {
  // 完整寫法（類型、默認值、非空、自定義校驗）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('傳入的范圍必須是0-100之間')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

到此這篇關于Vue使用Props實現(xiàn)組件數(shù)據(jù)交互的示例代碼的文章就介紹到這了,更多相關Vue Props數(shù)據(jù)交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: