vue中有很多有關數據的操作方法，比如父子組件數據的傳遞，子組件修改父組件數據，props,computed,watch,sync等，今天就來總結一下這些操作方法的使用

computed是計算屬性：減少模板{{}}的復雜度。 在模板中放入太多的邏輯會讓模板過重且難以維護。對于任何復雜邏輯，你都應當使用計算屬性 把復雜的運算邏輯寫到computed的函數里面，再在模板里引用就使邏輯變得簡單明了了 使用方法： computed與data并列，將一系列操作封裝成一個方法，放到computed里，調用時直接寫方法名，不用加( )

new Vue({ el:'#app', data:{ user:{ email:'[email protected]', nickname:'oldUath', phone:'12812345678' } }, //計算屬性 computed:{ displayName(){ //返回一個結果 const user=this.user return user.nickname ||user.phone||user.email } }, template:` <div> {{displayName}} </div> `})watch偵聽器

watch：偵聽器：觀察Vue實例上的數據變動,只要指定的數據改變就會執行預定的函數 當需要在數據變化時執行異步或開銷較大的操作時;

<div id='app'> {{msg}} <br> 改變了嗎? {{isChange}} <button @click='change'>改變</button> </div> new Vue({ el: '#app', data: { //這是第一層數據 msg:’欲窮千里目’, isChange:’No’, user:{ //這是第二層數據name:'oldUath',phone:’18312345678’ } }, watch:{ //只要msg改變,這個方法就會執行,第一層數據只需要寫 數據名(){}就可以 msg(val,oldVal){ this.isChange = ’Yes’ }, //第二層數據需要’’,’user.name’(){} ’user.name’(){ console.log(’user.name變了’) } }, methods:{ change(){ this.msg = ’更上一層樓’ } } })

注意：在vue里面如果把一個對象原封不動的再賦值給他，那么他的地址就變了

//obj:{a:’a’}obj.a+=’hi’//才是監聽obj時，因為obj地址沒有發生變化，所以不會執行監聽obj的事件

可以使用 deep：true這個是代表讓watch往深處監聽，值變了就相當于改變了

watch:{obj(){ handle(){console.log(’obj變了’) }, deep:true}使用方法二： vm.$watch(’監聽的變量’,調用的函數,{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})父組件給子組件傳遞數據： Props

父組件要想給子組件傳入數據，需要在子組件種使用Props引入變量

父組件要給子組件出入 money='100'先在父組件種傳入

//在父組件調用子組件<Child :money='100'><Child>

再在子組件種引入數據,引入money這個變量

<template><div class='red'>+ {{money}}元 <button>花錢</button></div></template><script>export default {+ props:[’money’]}</script>

此時子組件只能使用父組件的數據，而不能修改

組件不能直接修改props外部的數據

在子組件使用 $emit(‘參數1’，參數2)

當前實例繼承了eventBus，可以觸發一個事件

在子組件寫$emit,第一個參數是事件名，第二個參數是修改后的值

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

在父組件使用 $event接受參數2；

$event就是接收子組件參數2返回的結果的

<!-- 傳給子組件一個money值,v-on是監聽子組件的update:money事件， $event獲取子組件事件的結果--> <Child :money='total' v-on:update:money='total = $event' />簡化結果： sync

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

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

子組件還是那樣寫

這個只解決了父子組件的通信問題，兄弟組件的通信問題呢？

這種方法通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何組件間的通信，包括父子、兄弟、跨級。當我們的項目比較大時，可以選擇更好的狀態管理解決方案vuex。 具體實現方式

var Event=new Vue(); Event.$emit(事件名,數據);//傳遞事件數據 Event.$on(事件名,data => {});//接受數據

舉個例子：A組件向C組件傳遞信息，ABC是相鄰組件

首先在A組件提供事件數據使用$emit,第一個參數是數據名，要與接收數據的on的第一個參數相同；第二個參數是數據

<template id='a'> <div> <h3>A組件：{{name}}</h3> <button @click='send'>將數據發送給C組件</button> </div></template><script>var Event = new Vue();//定義一個空的Vue實例var A = { template: ’#a’, data() { return { name: ’tom’ } }, methods: { send() { Event.$emit(’data-a’, this.name); } }}</script>

在C組件接受數據 $on，第一個參數是數據名，第二個參數用來接收數據

<template id='c'> <div> <h3>C組件：{{name}}，{{age}}</h3> </div></template><script>var Event = new Vue();//定義一個空的Vue實例var C = { template: ’#c’, data() { return { name: ’’, age: '' } }, mounted() {//在模板編譯完成后執行 Event.$on(’data-a’,name => { this.name = name;//箭頭函數內部不會產生新的this，這邊如果不用=>,this指代Event }) }}</script>總結 父子之間傳遞數據用 props和$emit 兄弟之間傳遞數據用 $emit和$on 父組件向孫子組件傳遞數據使用 provide和inject

以上就是vue 數據操作相關總結的詳細內容，更多關于vue 數據操作的資料請關注好吧啦網其它相關文章！