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