目錄
1. 計(jì)算屬性
1.1 計(jì)算屬性的特點(diǎn)
2. 內(nèi)容分發(fā)
2.1?使用插槽的示例
3. 自定義事件
1. 計(jì)算屬性
什么是計(jì)算屬性 ?
計(jì)算屬性的重點(diǎn)突出在屬性兩字, 首先它是個(gè)屬性, 其次這個(gè)屬性有計(jì)算的能力, 這里的計(jì)算就是個(gè)函數(shù); 簡(jiǎn)單來(lái)說(shuō), 它就是一個(gè)能夠?qū)⒂?jì)算結(jié)果緩存起來(lái)的屬性 (將行為轉(zhuǎn)化成了靜態(tài)的屬性), 僅此而已; 可以想象為緩存!
代碼示例 :?
<div id="app">
<p>currentTime1: {{currentTime1()}}</p>
<p>currentTime2: {{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {
currentTime1: function() {
return Date.now(); // 返回一個(gè)時(shí)間戳
}
},
computed: { // 計(jì)算屬性 注意: methods, computed 方法不能重名, 重名之后只會(huì)調(diào)用 methods 方法
currentTime2: function() {
return Date.now(); // 返回一個(gè)時(shí)間戳
}
}
});
</script>說(shuō)明:
- methods : 定義方法, 調(diào)用方法使用 currentTime1(), 需要帶括號(hào);
- computed :?定義計(jì)算屬性, 調(diào)用屬性使用 currentTime2, 不需要帶括號(hào);?
【注意】methods 和 computed 中的方法不能重名
如果二者方法重名了, 就只會(huì)調(diào)用到 methods? 中的方法.? 請(qǐng)看如下示例?:?
訪問(wèn)頁(yè)面 :?
?
1.1 計(jì)算屬性的特點(diǎn)
針對(duì)上述代碼示例, 對(duì)比調(diào)用?methods 和 computed 方法的變化 :?
1. 控制臺(tái)調(diào)用 methods 中的方法 :?
每次調(diào)用 currentTime1, 時(shí)間戳都會(huì)發(fā)生改變.
2. 控制臺(tái)調(diào)用 computed 中的方法 :?
每次調(diào)用 currentTime2, 時(shí)間戳不會(huì)發(fā)生變化. 計(jì)算出來(lái)的結(jié)果被緩存在內(nèi)存中了.
【注意變化】
此時(shí)我在?computed 中調(diào)用一下 data 中的 msg 數(shù)據(jù), 并在控制臺(tái)中不斷調(diào)用 computed 中的currentTime2 過(guò)程中, 突然修改一下 msg 的值, 再去調(diào)用 currentTime2, 此時(shí)觀察變化 :
當(dāng) computed 中其他數(shù)據(jù)刷新時(shí), currentTime2 的時(shí)間戳就會(huì)重新計(jì)算, 這個(gè)和緩存一模一樣.?
【結(jié)論】
調(diào)用方法時(shí), 每次都需要進(jìn)行計(jì)算, 既然有計(jì)算過(guò)程則必定產(chǎn)生系統(tǒng)開(kāi)銷, 那如果這個(gè)結(jié)果是不經(jīng)常變化的的呢 ? 此時(shí)就可以考慮將這個(gè)結(jié)果緩存起來(lái), 采用計(jì)算屬性可以很方便的做到這一點(diǎn), 計(jì)算屬性的主要特征就是為了將經(jīng)常變化的計(jì)算結(jié)果進(jìn)行緩存, 以節(jié)約我們的系統(tǒng)開(kāi)銷;?
2. 內(nèi)容分發(fā)
在 Vue.js 中我們使用 <slot> 元素作為承載分發(fā)內(nèi)容的出口, 作者稱其為 "插槽", 可以應(yīng)用在組合組件的場(chǎng)景中.
為什么需要插槽 ? 比如當(dāng)我們遇到以下場(chǎng)景時(shí) :?
<div id="app">
<p>列表書(shū)籍</p>
<ul>
<li>Java</li>
<li>Linux</li>
<li>Python</li>
</ul>
</div>按照原先的方式, 我們想要拿到 li 中的所有數(shù)據(jù), 就得遍歷 ul, 可現(xiàn)在 ul 里面隔了 li , 此時(shí)再按照之前的方式遍歷就會(huì)出問(wèn)題, 于是就需要使用到 "插槽" 來(lái)解決
2.1?使用插槽的示例
準(zhǔn)備一個(gè)待辦事項(xiàng)組件 (todo), 該組件由待辦標(biāo)題 (todo-title) 和待辦內(nèi)容 (todo-items) 組成, 但是這三個(gè)組件又是互相獨(dú)立的, 如何使用插槽來(lái)實(shí)現(xiàn) ??
1. 定義一個(gè)待辦事項(xiàng)的組件 :?
<div id="app">
<todo>
</todo>
</div>
<script>
Vue.component("todo",{
template: '<div>\
<div>列表書(shū)籍</div>\
<ul>\
<li>Java</li>\
</ul>\
</div>'
});
</script>2. 讓待辦事項(xiàng)的標(biāo)題和值實(shí)現(xiàn)動(dòng)態(tài)綁定. 我們給上面的待辦事項(xiàng)的標(biāo)題和值都留出一個(gè)插槽.? <slot> 標(biāo)簽
<div id="app">
<todo>
</todo>
</div>
<script>
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
</script>3. 定義?todo-title 的待辦標(biāo)題組件和 todo-items 的待辦內(nèi)容組件.
// 待辦標(biāo)題組件
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
// 待辦內(nèi)容組件
Vue.component("todo-items",{
props: ['item','index'],
template: '<li>{{index}}--{{item}}</li>'
});4. 實(shí)例化 Vue, 并初始化數(shù)據(jù)
var vm = new Vue({
el: "#app",
data: {
title: "跟秦老師學(xué) Vue",
todoItems: ['你好世界','毛毛學(xué)hadoop','毛毛學(xué)Linux']
}
});5. 將這些值通過(guò)插槽插入, 實(shí)現(xiàn)組合組件的內(nèi)容分發(fā).
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index"></todo-items>
</todo>
</div>瀏覽器訪問(wèn) :?
?由此可見(jiàn), 插槽在組合組件中實(shí)現(xiàn)內(nèi)容分發(fā)起了關(guān)鍵作用.?
3. 自定義事件
既然 Vue 它是雙向綁定的, 那我們?nèi)绾吾槍?duì)上述內(nèi)容分發(fā)的示例, 實(shí)現(xiàn)動(dòng)態(tài)的刪除呢 ??
?分別在 todo-items 組件和 vm 實(shí)例中增加刪除方法 :?
Vue.component("todo-items",{
props: ['item','index'],
// 只能綁定當(dāng)前組件的方法
template: '<li>{{index}}---{{item}} <button @click="remove">刪除</button></li>',
methods: {
remove: function() {
alert("刪除成功!");
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "秦老師說(shuō) Vue",
todoItems: ['你好世界','毛毛學(xué)hadoop','毛毛學(xué)Linux']
},
methods: {
removeItems: function (index) {
this.todoItems.splice(index,1);
}
}
});? ? ? ?但是現(xiàn)在問(wèn)題是, todo-items 組件中無(wú)法綁定 vue 實(shí)例中的方法, 一旦我把 @click="remove" 寫(xiě)成 @click="removeItems", 訪問(wèn)頁(yè)面的時(shí)候, 就會(huì)報(bào)?removeItems 未定義的錯(cuò)誤.??
? ? ? 于是 Vue 就為我們提供了自定義事件的功能幫助我們解決這個(gè)問(wèn)題 ,?
使用 this.$emit("自定義事件名", 參數(shù)), 具體操作如下 :?
1. View 層模板綁定 Vue 實(shí)例中的方法
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
2. todo-Items 組件中使用 this.$emit() 綁定 view 模板中的自定義事件
Vue.component("todo-items",{
props: ['item','index'],
// 只能綁定當(dāng)前組件的方法
template: '<li>{{index}}---{{item}} <button @click="remove">刪除</button></li>',
methods: {
// this.$emit 自定義事件分發(fā)
remove: function(index) {
this.$emit('remove',index);
}
}
});此時(shí)就能動(dòng)態(tài)的對(duì)數(shù)據(jù)進(jìn)行刪除了.
自定義事件原理圖 :?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-477921.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-477921.html
到了這里，關(guān)于Vue 組件化: 計(jì)算屬性、內(nèi)容分發(fā)、自定義事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
