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

computed是計算屬性

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例項上的資料變動,只要指定的資料改變就會執行預定的函式 當需要在資料變化時執行非同步或開銷較大的操作時;

watch使用方法一：

<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:'欲窮千里目',user:{
        name:"oldUath",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>

此時子元件只能使用父元件的資料，而不能修改

子元件修改父元件的資料（.sync原理）

元件不能直接修改props外部的資料

使用$emit進行修改

在子元件使用 $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" />

子元件還是那樣寫

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

兄弟元件通訊：emit/emit/on

這種方法通過一個空的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 資料操作的資料請關注我們其它相關文章！