Vue的props配置項詳解

更新時間：2022年02月16日 11:16:46 作者：我會努力變強(qiáng)的

這篇文章主要為大家詳細(xì)介紹了Vue的props配置項，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

簡介

主要介紹props配置項的概念，使用等。

props的作用是用來接收父組件中傳過來的數(shù)據(jù)。

編寫步驟有兩個：

子組件使用props配置項進(jìn)行屬性的接收。
父組件使用子組件時以組件標(biāo)簽屬性的形式進(jìn)行數(shù)據(jù)的傳遞。

子組件使用props配置項進(jìn)行屬性的接收的形式有三種：

第一種：簡單模式。

main.js：

//引入vue依賴
import Vue from 'vue'
//引入組件App
import App from './App.vue'

// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false

//創(chuàng)建一個vue實例
new Vue({
  //這個目前還沒學(xué)過，先知道他的作用是將app放入容器中。
  render: h => h(App),

  //配置該vue實例管理id為app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 編寫結(jié)構(gòu) -->
    <div>
    <!-- 父組件編寫組件標(biāo)簽時，將數(shù)據(jù)以屬性的方式進(jìn)行傳遞。 -->
    <student studentName="Yehaocong" studentAge="25"></student>
    <student studentName="Liaoxiaoyan" studentAge="21"></student>
    </div>
</template>

<script>

import student from "./components/Student.vue"

export default {


    components:{
        //注冊組件
        student
    }
}
</script>

<style>

</style>

Student.vue：

<template>
    <!-- 編寫組件結(jié)構(gòu)代碼，也就是html代碼 -->
    <!-- 需要一個div括住，也就是只能有一個根元素，一般使用div -->
    <div class="orange">
        <div>學(xué)生姓名：{{studentName}}</div>
        <div>年齡：{{studentAge}}</div>
    </div>
</template>

<script>
//交互代碼編寫的地方，需要暴露出去給其他地方引入
//這個需要有一點es6模塊化的知識，這里一般使用默認(rèn)暴露，因為這是單文件組件，只需要暴露一個組件對象，
//并且引入默認(rèn)暴露的組件引入語法比較簡單。
export default {
    data() {
        return {
        
        }
    },

    //簡便寫法,用于接收父組件傳遞過來的數(shù)據(jù)
    //數(shù)組形式，里面聲明屬性名稱即可
    props:["studentName","studentAge"],
}
</script>

<style>
    /* 編寫樣式的地方 */
    .orange{
        background-color: orange;
    }
</style>

效果：可以看到數(shù)據(jù)以正確顯示。

在這里插入圖片描述