欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue.js組件間通信方式總結【推薦】

平時在使用Vue框架的業(yè)務開發(fā)中，組件不僅僅要把模板的內容進行復用，更重要的是組件之間要進行通信。組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供商洛網(wǎng)站建設、商洛做網(wǎng)站、商洛網(wǎng)站設計、商洛網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、商洛企業(yè)網(wǎng)站模板建站服務，十余年商洛做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

1.父組件到子組件通過props通信

在組件中，使用選項props來聲明需要從父級組件接受的數(shù)據(jù)，props的值可以是兩種：一種是字符串數(shù)組，一種是對象。props中聲明的數(shù)據(jù)與組件data函數(shù)return的主要區(qū)別在于props來自父級，而data中的組件是自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template及計算屬性computed和方法methods中使用。如以下例子：

// 父組件 ParentComponent
<template>
 <div class="parent-component">
 <h3>這是一個父組件</h3>
 <ChildComponent :parentMessage="parentMessage"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'這是來自父組件的數(shù)據(jù)'
  }
 },
 components:{
  ChildComponent
 }
 }
</script>
// 子組件 ChildComponent
<template>
<div class="child-component">
 <h3>這是一個子組件</h3>
 <h4>{{parentMessage}}</h4>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage"]
 }
</script>

Vue.js組件間通信方式總結【推薦】

小結：父組件傳遞個子組件的數(shù)據(jù)可以寫死，也可以用父級的動態(tài)數(shù)據(jù)用v-bind來綁定props的值。

2.子組件到父組件通過$emit，$on通信

當子組件需要向父組件傳遞數(shù)據(jù)時，就要用到自定義事件，v-on指令除了監(jiān)聽DOM事件外，還可以用于組件間的自定義事件，Vue組件有一套類似與觀察者模式的一套模式，子組件用$emit()來觸發(fā)事件，父組件用$on()來監(jiān)聽子組件的事件。舉個例子如下：

// ParentComponent 父組件
<template>
 <div class="parent-component">
 <h3>這是一個父組件total:{{total}}</h3>
 <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'這是來自父組件的數(shù)據(jù)',
  total:10,
  }
 },
 components:{
  ChildComponent
 },
 methods:{
  getTotal(total){
  this.total=total;
  console.log('ParentComponent total:',total);
  }
 }
 }
</script>
// ChildComponent 子組件
<template>
<div class="child-component">
 <h3>這是一個子組件</h3>
 <h4>{{parentMessage}}</h4>
 <button @click="handleAdd10">+10按鈕</button>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage","total"],
 methods:{
  handleAdd10(){
  let total=this.total+10;
  console.log('ChildComponent $emit:');
  this.$emit('handleAdd10',total);
  }
 }
 }
</script>

結果：

Vue.js組件間通信方式總結【推薦】

上面例子中，子組件有一個按鈕，實現(xiàn)加10的效果，子組件通過props項來接收父組件傳入的total值，在改變total后，通過$emit把它傳給父組件，父組件定義事件@handleAdd10方法，子組件$emit()方法第一個參數(shù)是自定義事件的名稱，后面的參數(shù)是要傳的數(shù)據(jù)，對應的父組件通過getTotal(total)來接收子組件傳遞的數(shù)據(jù)，由此子組件到父組件通信完成。

 3.表單子組件到父組件通過v-model來通信(語法糖)

// ParentComponent 改動如下
**
<h3>這是一個父組件total:{{total}}</h3>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子組件
<template>
 <input type="text" @input="updateValue($event)">
</template>
<script>
 export default {
 name: "InputComponent",
 methods:{
  updateValue(evt){
  this.$emit('input',evt.target.value)
  }
 }
 }
</script>

 結果如下：

Vue.js組件間通信方式總結【推薦】

以上示例中：因為子組件的石建明是特殊的input，在使用組件的父級，可以通過v-model來綁定數(shù)據(jù)total，這種實現(xiàn)方式也可以稱作語法糖，大大減少了父組件代碼量。

4.非父子組件通過中央事件總線(bus)來通信

在vue.js2.x中推薦使用一個空的Vue實例作為中央事件總線（bus）,先看一個例子：

// ParentComponent 父組件
<template>
 <div class="parent-component">
 {{message}}
 <br>
 <br>
 <component-a/>
 </div>
</template>

<script>
 import Vue from 'vue'
 let bus=new Vue();
 export default {
 name: "ParentComponent",
 data(){
  return{
  message:'',
  }
 },
 components:{
  componentA:{
  template:'<button @click="handleClick">傳遞事件</button>',
  methods:{
   handleClick(){
   bus.$emit('on-message','來自子組件component-a的內容')
   }
  }
  }
 },
 mounted(){
  bus.$on('on-message',(msg)=>{
  this.message=msg;
  });
 }
 }
</script>

結果如下：

Vue.js組件間通信方式總結【推薦】

以上例子中：首先創(chuàng)建了一個bus的空Vue實例，里面沒有任何內容，然后全局定義了組件component-a,，在父組件ParentChild的生命周期mounted鉤子函數(shù)中監(jiān)聽來自bus的事件on-message。而在組件component-a中，點擊按鈕會通過bus把事件on-message發(fā)出去，父組件會接受來自bus的事件，改變message的值。

這種方法巧妙輕量的實現(xiàn)了任何組件之間的通信，包括父子，兄弟，跨級組件。

5.狀態(tài)管理與Vuex與總結

在實際業(yè)務中，經(jīng)常會有跨組件共享數(shù)據(jù)的需求，如果項目不復雜，使用bus就能簡單的解決問題，但是使用bus在數(shù)據(jù)的管理、維護、架構設計上還只是一個簡單的組件，在大型單頁應用，多然開發(fā)的項目中，Vuex能更加優(yōu)雅和高效的完成狀態(tài)管理。

Vue.js組件間通信方式總結【推薦】

總結

以上所述是小編給大家介紹的Vue.js組件間通信方式總結【推薦】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：Vue.js組件間通信方式總結【推薦】
標題URL：http://chinadenli.net/article46/goiseg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App設計、域名注冊、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設