[Vue 牛刀小試]：第十章 - 組件間的數據通訊

時間 2020-05-10

標籤 vue 牛刀小試第十組件數據通訊简体版

原文原文鏈接

1、前言

　　在上一章的學習中，咱們繼續學習了 Vue 中組件的相關知識，瞭解了在 Vue 中如何使用組件的 data、prop 選項。在以前的學習中有提到過，組件是 Vue 中的一個很是重要的概念，咱們經過將頁面拆分紅一個個獨立的組件，從而更好地實現代碼複用，使咱們的代碼更加簡潔，容易維護。既然在 Vue 中咱們會大量的使用到組件，一定會涉及到組件之間的通訊，那麼本章咱們就來學習，如何實現組件間的數據交互。html

　　學習系列目錄地址：http://www.javashuo.com/article/p-bzzucmub-ba.htmlvue

　　倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/component/communication.htmlnode

2、乾貨合集

　　一、父組件 => 子組件

　　在上一章的時候，咱們有提到過，咱們可使用 prop 選項在組件中定義一些自定義特性，當有值傳遞給 prop 特性時，那個 prop 特性就變成了那個組件實例的一個屬性，此時咱們就能夠從組件上獲取到接收的值。所以，這裏咱們就能夠在使用子組件時經過 v-bind 指令動態的綁定一個 prop 特性，從而接收到父組件傳遞的值。git

　　能夠看到，在下面的示例代碼中，咱們在子組件中經過 v-bind 指令綁定了一個 prop 特性 parenttitle，用來接收父組件 data 選項中的 title 屬性，以後經過 watch 監聽屬性監聽綁定的 parenttitle 屬性，從而同步更新子組件 data 選項中的 content 屬性值。github

<body>
    <div id="app">
        <h4> 請輸入須要傳遞給子組件的值：<input type="text" v-model="title" />
        </h4>

        <hr />

        <child-node v-bind:parenttitle="title"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h4> Vue 實例中的屬性值爲：{{content}} </h4>
    </div>
</template>

<script>
    var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } } }) </script>

　　二、子組件 => 父組件

　　在 Vue 中存在着一個單向的下行綁定，父級組件的數據變動能夠影響到子集組件，反過來則不行。在實際開發中可能會遇到當子組件的數據更新後，須要同步更新父組件的狀況，那麼這時咱們應該怎麼作呢？app

　　既然沒辦法直接經過修改 prop 選項中的屬性進行更新父組件，不如讓咱們換一個思路思考。咱們想要實現的效果，無非是當子組件數據變動時可以同步引發父組件的變動，那麼，咱們是否是能夠在子組件數據發生變化後，觸發一個事件方法，告訴父組件我數據更新了，父組件只須要監聽這個事件，當捕獲到這個事件運行後，再對父組件的數據進行同步變動不就能夠了，整個的示意流程以下。post

　　那麼，如何才能實現事件監聽呢？學習

　　嗯，Vue 已經幫咱們實現好了解決方案。咱們可使用 v-on 事件監聽器監聽事件，經過 $emit 去觸發當前實例上的事件。固然，這裏的事件能夠是 Javascript 中的原生 DOM 事件，也能夠是咱們自定義的事件。this

　　例如，在下面的代碼中，當我點擊傳遞數據按鈕後，觸發了子組件的 func 方法，在 func 方法中觸發了子組件實例上的 show 事件，並把 input 框中的值做爲參數進行傳遞。這時，咱們在使用到子組件的地方就能夠經過 v-on(@) 指令監聽這個 show 事件，從而獲取到傳遞的參數，並觸發父組件的監聽事件。spa

<body>
    <div id="app">
        <h4> 子組件中的屬性值爲：{{msg}} </h4>

        <hr />

        <child-node @show="showMsg"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h4> 請輸入須要傳遞給父組件的值：<input v-model="childMsg" type="text" />
            <button @click="func">傳遞數據</button>
        </h4>
    </div>
</template>

<script>
    var vm = new Vue({ el: '#app', data: { title: '', msg: '', }, methods: { showMsg(data) { this.msg = data } }, components: { 'childNode': { template: '#child', data() { return { childMsg: '' } } methods: { func() { this.$emit('show', this.childMsg) } }, } } }) </script>

3、總結

　　這一章主要介紹了組件之間進行數據通訊的兩種最經常使用的方式，對於子組件獲取父組件數據，通常是採用組件的 prop 選項向子組件傳遞數據；而父組件獲取子組件數據，則是採用事件監聽的方式。在實際使用中，組件的通訊方式還有 .sync、$attrs、$listeners、slot-scope 等等，這裏就先不介紹了，嗯，其實就是我還不會，哈哈，先學習掌握這兩種最多見的方式，其它的方式就先放到後面再學習吧。