vue中有很多有關(guān)數(shù)據(jù)的操作方法，比如父子組件數(shù)據(jù)的傳遞，子組件修改父組件數(shù)據(jù)，props,computed,watch,sync等，今天就來(lái)總結(jié)一下這些操作方法的使用
computed是計(jì)算屬性
computed是計(jì)算屬性：減少模板{{}}的復(fù)雜度。 在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性 把復(fù)雜的運(yùn)算邏輯寫到computed的函數(shù)里面，再在模板里引用就使邏輯變得簡(jiǎn)單明了了 使用方法： computed與data并列，將一系列操作封裝成一個(gè)方法，放到computed里，調(diào)用時(shí)直接寫方法名，不用加( )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
new Vue({ el:"#app", data:{ user:{ nickname:"oldUath", phone:"12812345678" } }, //計(jì)算屬性 computed:{ displayName(){ //返回一個(gè)結(jié)果 const user=this.user return user.nickname ||user.phone||user.email } }, template:` <div> {{displayName}} </div> `}) |
watch偵聽器
watch：偵聽器：觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng),只要指定的數(shù)據(jù)改變就會(huì)執(zhí)行預(yù)定的函數(shù) 當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí);
watch使用方法一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<div id="app"> {{msg}} <br> 改變了嗎? {{isChange}} <button @click="change">改變</button> </div> new Vue({ el: "#app", data: { //這是第一層數(shù)據(jù) msg:'欲窮千里目', isChange:'No', user:{ //這是第二層數(shù)據(jù) name:"oldUath", phone:'18312345678' } }, watch:{ //只要msg改變,這個(gè)方法就會(huì)執(zhí)行,第一層數(shù)據(jù)只需要寫 數(shù)據(jù)名(){}就可以 msg(val,oldVal){ this.isChange = 'Yes' }, //第二層數(shù)據(jù)需要'','user.name'(){} 'user.name'(){ console.log('user.name變了') } }, methods:{ change(){ this.msg = '更上一層樓' } } }) |
注意：在vue里面如果把一個(gè)對(duì)象原封不動(dòng)的再賦值給他，那么他的地址就變了
|
1
2
|
//obj:{a:'a'}obj.a+='hi'//才是監(jiān)聽obj時(shí)，因?yàn)閛bj地址沒有發(fā)生變化，所以不會(huì)執(zhí)行監(jiān)聽obj的事件 |
可以使用 deep：true這個(gè)是代表讓watch往深處監(jiān)聽，值變了就相當(dāng)于改變了
|
1
2
3
4
5
6
|
watch:{ obj(){ handle(){console.log('obj變了') }, deep:true} |
使用方法二： vm.$watch('監(jiān)聽的變量',調(diào)用的函數(shù),{immediate:true})
與方法一的效果相同
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const vm = new Vue({ el: "#app", data: { msg:'欲窮千里目', isChange:'No', user:{ name:"oldUath", phone:'18312345678' } }, methods:{ change(){ this.msg = '更上一層樓' } } }) vm.$watch('msg',function(){ console.log('n變了') },{immediate:true}) |
父組件給子組件傳遞數(shù)據(jù)： Props
父組件要想給子組件傳入數(shù)據(jù)，需要在子組件種使用Props引入變量
父組件要給子組件出入 money="100"
先在父組件種傳入
|
1
2
|
//在父組件調(diào)用子組件<Child :money="100"><Child> |
再在子組件種引入數(shù)據(jù),引入money這個(gè)變量
|
1
2
3
4
5
6
7
8
9
10
11
|
<template><div class="red">+ {{money}}元 <button>花錢</button></div></template><script>export default {+ props:['money']}</script> |
此時(shí)子組件只能使用父組件的數(shù)據(jù)，而不能修改
子組件修改父組件的數(shù)據(jù)（.sync原理）
組件不能直接修改props外部的數(shù)據(jù)
使用$emit進(jìn)行修改
在子組件使用 $emit(‘參數(shù)1'，參數(shù)2)
當(dāng)前實(shí)例繼承了eventBus，可以觸發(fā)一個(gè)事件
在子組件寫$emit,第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是修改后的值
|
1
2
|
<!-- $emit()觸發(fā)一個(gè)事件，update:money是事件名 --><button @click="$emit('update:money',money-10)">花錢</button> |
在父組件使用 $event接受參數(shù)2；
$event就是接收子組件參數(shù)2返回的結(jié)果的
|
1
2
3
|
<!-- 傳給子組件一個(gè)money值,v-on是監(jiān)聽子組件的update:money事件， $event獲取子組件事件的結(jié)果--> <Child :money="total" v-on:update:money="total = $event" /> |
簡(jiǎn)化結(jié)果： sync
父組件這一大段代碼太麻煩了，vue把它封裝成了一個(gè)修飾符
|
1
|
<Child :money.sync="total" /> |
子組件還是那樣寫
這個(gè)只解決了父子組件的通信問題，兄弟組件的通信問題呢？
兄弟組件通信：emit/emit/on
這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來(lái)觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。 具體實(shí)現(xiàn)方式
|
1
2
3
|
var Event=new Vue();Event.$emit(事件名,數(shù)據(jù));//傳遞事件數(shù)據(jù)Event.$on(事件名,data => {});//接受數(shù)據(jù) |
舉個(gè)例子：A組件向C組件傳遞信息，ABC是相鄰組件
首先在A組件提供事件數(shù)據(jù)使用$emit,第一個(gè)參數(shù)是數(shù)據(jù)名，要與接收數(shù)據(jù)的on的第一個(gè)參數(shù)相同；第二個(gè)參數(shù)是數(shù)據(jù)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template id="a"> <div> <h3>A組件：{{name}}</h3> <button @click="send">將數(shù)據(jù)發(fā)送給C組件</button> </div></template><script>var Event = new Vue();//定義一個(gè)空的Vue實(shí)例var A = { template: '#a', data() { return { name: 'tom' } }, methods: { send() { Event.$emit('data-a', this.name); } }}</script> |
在C組件接受數(shù)據(jù) $on，第一個(gè)參數(shù)是數(shù)據(jù)名，第二個(gè)參數(shù)用來(lái)接收數(shù)據(jù)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template id="c"> <div> <h3>C組件：{{name}}，{{age}}</h3> </div></template><script>var Event = new Vue();//定義一個(gè)空的Vue實(shí)例var C = { template: '#c', data() { return { name: '', age: "" } }, mounted() {//在模板編譯完成后執(zhí)行 Event.$on('data-a',name => { this.name = name;//箭頭函數(shù)內(nèi)部不會(huì)產(chǎn)生新的this，這邊如果不用=>,this指代Event }) }}</script> |
總結(jié)
-
父子之間傳遞數(shù)據(jù)用
props和$emit -
兄弟之間傳遞數(shù)據(jù)用
$emit和$on -
父組件向?qū)O子組件傳遞數(shù)據(jù)使用
provide和inject
以上就是vue 數(shù)據(jù)操作相關(guān)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于vue 數(shù)據(jù)操作的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6906371672018780173
