Vue中的components組件與props的使用解讀
components組件與props的使用
vue-cli 3.0 項(xiàng)目,使用components組件化開發(fā),可以減少不必要重復(fù)的代碼
初始化vue-cli3.0的項(xiàng)目的結(jié)構(gòu)目錄下的src下會有個(gè)components文件夾

建議:在components中創(chuàng)建對應(yīng)模塊的文件夾,存放該模塊的公共組件

在loginReg.vue文件夾中寫上代碼,通過props父傳子的方式,那需要接收父組件的值使用 綁定:屬性名="變量"的形式。并且在props中定義
以下是loginReg.vue 文件:
<template>
<div class="loginRegComponent">
<div class="titleBox">
<p class="title-left"></p>
<p v-if="title" class="title-center">{{title}}</p>
<p class="title-right" v-if="lesgo=='去注冊'" @click="$router.push('/register')">{{lesgo}}</p>
<p class="title-right" v-else @click="$router.push('/login')">{{lesgo}}</p>
</div>
<input type="text" v-model="userinfo.username" class="username input-group form-control glyphicon glyphicon-user" :placeholder="placeholderUser">
<input type="password" v-model="userinfo.password" class="password input-group form-control" :placeholder="placeholderPsw">
<div>
<input type="text" v-model="userinfo.code" class="code input-group form-control" :placeholder="placeholderCode">
<span class="codeNumber"></span>
</div>
<button class="btn btn-primary" @click="btnSubmit">{{btnText}}</button>
</div>
</template>
<script>
export default {
props: {
title: String,
placeholderUser:String,
placeholderPsw: String,
placeholderCode: Number,
btnText:{
default: "text", //可以傳個(gè)默認(rèn)值
type:String //類型
},
lesgo: String,
},
data() {
return {
userinfo: {
username: null,
password: null,
code: null,
},
};
},
methods: {
btnSubmit() { //發(fā)送事件 數(shù)據(jù)
this.$emit("btnSubmit", this.userinfo);
},
},
};
</script>在login.vue 引入寫好的loginReg.vue組件,通過props的參數(shù)名來對應(yīng)的設(shè)置值
注冊頁面也是對飲的引入<login-reg> 的方式進(jìn)行傳參,在不需要顯示對應(yīng)的input框的時(shí)候可以使用v-if來判斷,存在值才顯示。
login.vue頁面:
<template>
<div id="login" class="login" :style="{height:DocHeight+'px'}">
<div class="container-fluid">
<login-reg
title="登錄"
placeholderUser="請輸入賬號"
placeholderPsw="請輸入密碼"
placeholderCode="請輸入驗(yàn)證碼"
btnText="登錄"
@btnSubmit="btnSubmit" //接收事件
lesgo="去注冊"
>
</login-reg>
</div>
</div>
</template>
<script>
// 通過import的方式導(dǎo)入
import loginReg from "@/components/loginReg/loginReg.vue";
export default {
name: "login",
components: {//注冊組件
loginReg,
},
data() {
return {};
},
methods: {
btnSubmit(data) {//接收子組件發(fā)送過來的事件/數(shù)據(jù)
console.log(data);
},
}效果圖

vue中props的默認(rèn)寫法
默認(rèn)寫法
? props: {
? ? rowClick: {
? ? ? type: Function,
? ? ? default: function() {}
? ? },
? ? title: {
? ? ? type: String,
? ? ? default: "標(biāo)題"
? ? },
? ? display: {
? ? ? type: String,
? ? ? default: "table"?
? ? },
? ? columnCount: {
? ? ? type: Number,
? ? ? default: 4
? ? },
? ? columns: {
? ? ? type: Array,
? ? ? default() {
? ? ? ? return [];
? ? ? }
? ? },
? ? showPage: {
? ? ? type: Boolean,
? ? ? default: true
? ? },
? ? api: {
? ? ? type: Object,
? ? ? default() {
? ? ? ? return {};
? ? ? }
? ? },
? ? parameter: {
? ? ? type: Object,
? ? ? default() {
? ? ? ? return {};
? ? ? }
? ? },
? ? defaultParameter: {
? ? ? type: Boolean,
? ? ? default() {
? ? ? ? return true;
? ? ? }
? ? }
? },注意:
如果默認(rèn)值得類型為數(shù)組或者對象,一定要在函數(shù)中返回這個(gè)默認(rèn)值,而不是直接寫,否則報(bào)錯(cuò)
正確:
?menu:{
? ? ?type:Array,
? ? ?default:function(){
? ? ? ? ?return []
? ? ?}
?}錯(cuò)誤
?menu:{
? ? ?type:Array,
? ? ?default:[]
?}或者直接跟上面第一個(gè)代碼一樣,不管什么類型,都寫在函數(shù)返回中。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中provide?inject的響應(yīng)式監(jiān)聽解決方案
這篇文章主要介紹了vue中provide?inject的響應(yīng)式監(jiān)聽解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-08-08
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料,允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue項(xiàng)目之前端CryptoJS加密、解密代碼示例
在Vue項(xiàng)目中集成CryptoJS進(jìn)行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項(xiàng)目文件中引入CryptoJS,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
公共Hooks封裝文件下載useDownloadFile實(shí)例詳解
這篇文章主要為大家介紹了公共Hooks封裝文件下載useDownloadFile實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11

