Vue注意事项及用得较多的属性归纳
1、prop是一個(gè)對(duì)象而不是字符串?dāng)?shù)組時(shí)，它包含驗(yàn)證要求。
props: {
// 基礎(chǔ)類型檢測(cè) （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propD: {
type: Number,
default: 100
},
// 數(shù)組／對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
2、父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件！
$on(eventName) 監(jiān)聽(tīng)事件
$emit(eventName) 觸發(fā)事件
3、使用 Vue.component 定義全局組件的時(shí)候，組件名稱使用了 駝峰命名（如myLogin），則在引用組件的時(shí)候，需要把 大寫的駝峰改為小寫的字母，同時(shí)在兩個(gè)單詞之前，使用 - 鏈接（<my-login></my-login>）；如果不使用駝峰,則直接拿名稱來(lái)使用即可；
注意：不論是哪種方式創(chuàng)建出來(lái)的組件，組件的 template 屬性指向的模板內(nèi)容，必須有且只能有唯一的一個(gè)根元素，否則會(huì)報(bào)錯(cuò)。
4、用于登陸和注冊(cè)兩個(gè)組件之間的切換問(wèn)題：使用flag即可。
注：由于flag的值只有true和false，所以只能用于兩個(gè)組件間 的切換，當(dāng)大于兩個(gè)組件的切換就不行了。具體操作如下：
<div id="box">
<!-- 給a注冊(cè)點(diǎn)擊事件，切換flag狀態(tài) -->
<a href="javascript:;" @click.prevent="flag=true">登錄</a>
<a href="javascript:;" @click.prevent="flag=false">注冊(cè)</a>
<!-- 使用v-if v-else切換組件 -->
<login v-if="flag">
</login>
<register v-else="flag">
</register>
</div>
<script>
Vue.component('login', {
template: '<h3>登錄組件</h3>'
});
Vue.component('register', {
template: '<h3>注冊(cè)組件</h3>'
});
var vm = new Vue({
el: "#box",
data: {
flag: true
},
methods: {}
});
</script>
如要切換3個(gè)及以上的組件則需要使用 :is 屬性來(lái)執(zhí)行。
如：<component :is="componentId"></component>
具體實(shí)施：
<div id="box">
<!-- 給a注冊(cè)點(diǎn)擊事件，切換flag狀態(tài) -->
<a href="javascript:;" @click.prevent="componentId='login'">登錄</a>
<a href="javascript:;" @click.prevent="componentId='register'">注冊(cè)</a>
<component :is="componentId"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登錄組件</h3>'
});
Vue.component('register', {
template: '<h3>注冊(cè)組件</h3>'
});
var vm = new Vue({
el: "#box",
data: {
componentId: 'login' // 默認(rèn)顯示登錄
},
methods: {}
});
</script>
5、父組件引用子組件，通過(guò)綁定屬性（v-bind:）的形式，把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用。
<div id="box">
<mycom v-bind:parentmsg="msg"></mycom>
</div>
<template id="temp">
<h3>子組件 --- 父組件：{{parentmsg}}</h3>
</template>
<script>
var vm = new Vue({
el: "#box",
data: {
msg: '父組件的msg'
},
methods: {},
components: {
mycom: {
template: "#temp",
// 對(duì)傳遞給子組件的數(shù)據(jù)進(jìn)行聲明，子組件才能使用
props: ['parentmsg']
}
}
});
</script>
注意：父組件綁定的屬性名稱不能有大寫字母，否則不會(huì)顯示，并且在命令行會(huì)有提示：
6、組件data數(shù)據(jù)和props數(shù)據(jù)的區(qū)別：
data數(shù)據(jù)是子組件私有的，可讀可寫；
props數(shù)據(jù)是父組件傳遞給子組件的，只能讀，不能寫。
案例：發(fā)表評(píng)論功能
父組件為評(píng)論列表，子組件為ID，評(píng)論者，內(nèi)容和按鈕的集合，在輸入ID，評(píng)論者等內(nèi)容，然后點(diǎn)擊添加的時(shí)候，需要首先獲取子組件的list列表，然后再添加新的列表項(xiàng)到列表中。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<mycom :plist="list"></mycom>
<!--父組件列表-->
<ul>
<li v-for="item in list" :key="item.id">
ID:{{item.id}} --- 內(nèi)容：{{item.content}} --- 評(píng)論人：{{item.user}}
</li>
</ul>
</div>
<!--子組件：內(nèi)容需要添加到父組件的列表中-->
<template id="tmp1">
<div>
<label>
ID:
<input type="text" v-model="id">
</label>
<br>
<label>
評(píng)論者:
<input type="text" v-model="user">
</label>
<br>
<label>
內(nèi)容:
<textarea v-model="content"></textarea>
</label>
<br>
<!-- 把父組件的數(shù)據(jù)作為子組件的函數(shù)參數(shù)傳入 -->
<input type="button" value="添加評(píng)論" @click="addContent(plist)">
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data: {
list: [{
id: Date.now(),
user: 'user1',
content: 'what'
}, {
id: Date.now(),
user: 'user2',
content: 'are'
}]
},
methods: {},
components: {
mycom: {
template: '#tmp1',
data: function () {
return {
id: '',
user: '',
content: '',
}
},
methods: {
addContent(plist) {
//plist.unshift({ //可向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。
plist.push({ //將新項(xiàng)添加到數(shù)組末尾，請(qǐng)使用 push() 方法。
id: this.id,
user: this.user,
content: this.content
});
}
},
props: ['plist']
}
}
});
</script>
</body>
</html>
把添加ID，評(píng)論人，內(nèi)容作為子組件，把列表作為父組件，然后把添加的數(shù)據(jù)放到父組件列表上，由于要獲取到父組件列表的數(shù)據(jù)，所以必然涉及到父組件向子組件傳值的過(guò)程。這里還通過(guò)子組件方法參數(shù)來(lái)保存父組件的數(shù)據(jù)到子組件的數(shù)據(jù)中。
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/LindaBlog/p/9700812.html
總結(jié)
以上是生活随笔為你收集整理的Vue注意事项及用得较多的属性归纳的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 熊掌号指数2.0常见问题汇总
- 下一篇： vue如何使用element-ui实现循