vue中有很多有關(guān)數(shù)據(jù)的操作方法，比如父子組件數(shù)據(jù)的傳遞，子組件修改父組件數(shù)據(jù)，props,computed,watch,sync等，今天就來(lái)總結(jié)一下這些操作方法的使用

computed是計(jì)算屬性

computed是計(jì)算屬性：減少模板{{}}的復(fù)雜度。 在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性 把復(fù)雜的運(yùn)算邏輯寫(xiě)到computed的函數(shù)里面，再在模板里引用就使邏輯變得簡(jiǎn)單明了了 使用方法： computed與data并列，將一系列操作封裝成一個(gè)方法，放到computed里，調(diào)用時(shí)直接寫(xiě)方法名，不用加( )

new Vue({ el:'#app', data:{ user:{ email:'[email protected]', 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偵聽(tīng)器

watch：偵聽(tīng)器：觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng),只要指定的數(shù)據(jù)改變就會(huì)執(zhí)行預(yù)定的函數(shù) 當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí);

watch使用方法一：

<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ù)只需要寫(xiě) 數(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)的再賦值給他，那么他的地址就變了

//obj:{a:’a’}obj.a+=’hi’//才是監(jiān)聽(tīng)obj時(shí)，因?yàn)閛bj地址沒(méi)有發(fā)生變化，所以不會(huì)執(zhí)行監(jiān)聽(tīng)obj的事件

可以使用 deep：true這個(gè)是代表讓watch往深處監(jiān)聽(tīng)，值變了就相當(dāng)于改變了

watch:{obj(){ handle(){console.log(’obj變了’) }, deep:true}使用方法二： vm.$watch(’監(jiān)聽(tīng)的變量’,調(diào)用的函數(shù),{immediate:true})

與方法一的效果相同

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'先在父組件種傳入

//在父組件調(diào)用子組件<Child :money='100'><Child>

再在子組件種引入數(shù)據(jù),引入money這個(gè)變量

<template><div class='red'>+ {{money}}元 <button>花錢(qián)</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è)事件

在子組件寫(xiě)$emit,第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是修改后的值

<!-- $emit()觸發(fā)一個(gè)事件，update:money是事件名 --><button @click='$emit(’update:money’,money-10)'>花錢(qián)</button>

在父組件使用 $event接受參數(shù)2；

$event就是接收子組件參數(shù)2返回的結(jié)果的

<!-- 傳給子組件一個(gè)money值,v-on是監(jiān)聽(tīng)子組件的update:money事件， $event獲取子組件事件的結(jié)果--> <Child :money='total' v-on:update:money='total = $event' />簡(jiǎn)化結(jié)果： sync

父組件這一大段代碼太麻煩了，vue把它封裝成了一個(gè)修飾符

<Child :money.sync='total' />

子組件還是那樣寫(xiě)

這個(gè)只解決了父子組件的通信問(wèn)題，兄弟組件的通信問(wèn)題呢？

兄弟組件通信：emit/emit/on

這種方法通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。 具體實(shí)現(xiàn)方式

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ù)

<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ù)

<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ǎng)其它相關(guān)文章！