vue中父子組件通信

通信方式：

> props（常用）
> props和$emit（常用）
> .sync（語法糖）
> model（單選框和復(fù)選框場景可以使用）
> $attr和$listeners（組件封裝用的比較多）
> provide和inject（高階組件/組件庫使用比較多）
> eventBus（小項(xiàng)目中使用就好）
> Vuex（中大型項(xiàng)目推薦使用）
> $parent和$children（推薦少用）
> $root（組件樹的根，用的少）
> 其他通信方式

一窥浪、props

當(dāng)前組件接收到的 props 對象悴晰。Vue 實(shí)例代理了對其 props 對象屬性的訪問坑赡。

在使用prop傳參時(shí)需要注意：

vue的設(shè)計(jì)理念是單向數(shù)據(jù)流宋税，不建議在子組件直接更改父級(jí)的數(shù)據(jù)。
未在父組件data中聲明的對象屬性坪圾，子組件無法獲取更新內(nèi)容晓折。
數(shù)組的變化和更新，取決于vue重寫數(shù)組方法是否有實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽功能兽泄。vue有兩種觀察數(shù)組的方法：變異方法（push漓概、pop、shift病梢、unshift胃珍、splice、sort蜓陌、reverse）和非變異方法（filter觅彰、concat、slice）钮热，變異方法可以修改原數(shù)組填抬，非變異方法不可以修改原數(shù)組，但是非變異方法可以用新數(shù)組替換舊數(shù)組來實(shí)現(xiàn)數(shù)據(jù)的重新渲染隧期。

    // Father組件
    <template>
      <div class="father">
        <Child 
          :msg='msg' 
          :changeMsg='handleChangeMsg'
          />
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    
    export default {
        name: 'father',
        data() {
            return {
                msg: 'msg'
            }
        },
        methods: {
            handleChangeMsg(value) {
                this.msg = value
            }
        },
        components: {
            Child
        }
    }
    </script>

    // Child組件
    <template>
      <div class="child">
        <h3>String使用：</h3>
        <div>
          {{msg}}
        </div>
        <button @click="handleChangeMsg">修改父組件的msg</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Child',
      props: {
        msg: {
          type: String,
          default: ''
        },
        changeMsg: {
          type: Function,
          default: () => {}
        }
      },
      methods: {
          handleChangeMsg() {
            // this.msg = 'a' // 控制臺(tái)會(huì)報(bào)錯(cuò)
            
            // 可以使用父組件給的方法來改數(shù)據(jù)
            this.changeMsg('hello world')
          }
      }
    }
    </script>

二飒责、props和$emit

觸發(fā)當(dāng)前實(shí)例上的事件赘娄。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。

emit的使用場景主要是在子組件要傳參數(shù)給父組件宏蛉，通過$emit來觸發(fā)父組件給的監(jiān)聽器遣臼。

    // Father組件
    <template>
      <div class="father">
        {{value}}
        <Child v-on:change="handleChange" :value='value' />
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    
    export default {
        name: 'father',
        data() {
            return {
                value: ''
            }
        },
        methods: {
            handleChange(value) {
              this.value = value
            }
        },
        components: {
            Child
        }
    }
    </script>

    // Child組件
    <template>
        <div class="child">
            <input type="text" :value="value" @change="_change">
        </div>
    </template>
    
    <script>
    export default {
        name: 'Child',
        props: {
            value: String
        },
        methods: {
            _change(e) {
                this.$emit('change', e.target.value)
            }
        }
    }
    </script>

三、.sync語法糖（2.3.0+ 新增）

在有些情況下拾并，我們可能需要對一個(gè) prop 進(jìn)行“雙向綁定”揍堰。不幸的是，真正的雙向綁定會(huì)帶來維護(hù)上的問題嗅义，因?yàn)樽咏M件可以修改父組件屏歹，且在父組件和子組件都沒有明顯的改動(dòng)來源。因此以 update:myPropName 的模式觸發(fā)事件取而代之芥喇。

注意帶有 .sync 修飾符的 v-bind 不能和表達(dá)式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)西采。取而代之的是凰萨，你只能提供你想要綁定的屬性名继控，類似 v-model。
將 v-bind.sync 用在一個(gè)字面量的對象上胖眷，例如 v-bind.sync=”{ title: doc.title }”武通，是無法正常工作的，因?yàn)樵诮馕鲆粋€(gè)像這樣的復(fù)雜表達(dá)式的時(shí)候珊搀，有很多邊緣情況需要考慮冶忱。
當(dāng)我們用一個(gè)對象同時(shí)設(shè)置多個(gè) prop 的時(shí)候，也可以將這個(gè) .sync 修飾符和 v-bind 配合使用<Child :value.sync='value' v-bind.sync='obj' />境析，這樣會(huì)把 obj 對象中的每一個(gè)屬性 (如 title) 都作為一個(gè)獨(dú)立的 prop 傳進(jìn)去囚枪，然后各自添加用于更新的 v-on 監(jiān)聽器。

    // Father組件
    <template>
      <div class="father">
        {{value}}
        <br/>
        {{obj}}
        <br/>
        <!-- <Child v-on:update:value='value = $event' /> -->
        <!-- sync是上面的語法糖 -->
        <!-- <Child :value.sync='value' /> -->
        <Child :value.sync='value' v-bind.sync='obj' />
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    
    export default {
        name: 'father',
        data() {
            return {
                value: 'hello',
                obj: {
                  title: '主題',
                  content: '文本'
                }
            }
        },
        components: {
            Child
        }
    }
    </script>

    // Child組件
    <template>
        <div class="child">
            <input type="text" :value="value" @change="_change">
            <br/>
            <button @click="_changeObj">改變obj對象</button>
        </div>
    </template>
    
    <script>
    export default {
        name: 'Child',
        props: {
            value: String
        },
        methods: {
            _change(e) {
                this.$emit('update:value', e.target.value)
            },
            _changeObj() {
                this.$emit('update:title', '新主題')
            }
        }
    }
    </script>

四劳淆、model（2.2.0 新增）

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event链沼。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event沛鸵，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的括勺。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

    // Father組件
    <template>
      <div class="father">
        輸入的值是：{{phoneInfo}}
        <Child v-model="phoneInfo" />
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    
    export default {
      name: 'father',
      data() {
        return {
          phoneInfo: {
            areaCode: '+86',
            phone: ''
          }
        }
      },
      components: {
        Child
      }
    }
    </script>

    // Child組件
    <template>
        <div class="child">
            <select
                :value="phoneInfo.areaCode"
                placeholder="區(qū)號(hào)"
                @change="_changeAreaCode"
                >
                <option value="+86">+86</option>
                <option value="+60">+60</option>
            </select>
            <input
                :value="phoneInfo.phone"
                type="number"
                placeholder="手機(jī)號(hào)"
                @input="_changePhone"
            />
        </div>
    </template>
    
    <script>
    export default {
        name: 'Child',
        model: {
            prop: 'phoneInfo', // 默認(rèn) value
            event: 'change' // 默認(rèn) input
        },
        props: {
            phoneInfo: Object
        },
        methods: {
            _changeAreaCode(e) {
                this.$emit('change', {
                    ...this.phoneInfo,
                    areaCode: e.target.value
                })
            },
            _changePhone(e) {
                this.$emit('change', {
                    ...this.phoneInfo,
                    phone: e.target.value
                })
            }
        }
    }
    </script>

五曲掰、$attrs和$listeners (2.4.0 新增)

$attrs包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)疾捍。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)栏妖，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用乱豆。

$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用吊趾。

inheritAttrs也是2.4.0 新增宛裕，默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上房官。當(dāng)撰寫包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為续滋。通過設(shè)置 inheritAttrs 到 false翰守，這些默認(rèn)行為將會(huì)被去掉。而通過實(shí)例屬性 $attrs 可以讓這些特性生效疲酌，且可以通過 v-bind 顯性的綁定到非根元素上蜡峰。

    // 第一個(gè)組件
    <template>
      <div class="one">
        第一個(gè)組件的value：{{value}}
        <Two :value='value' @change="handleChange" @changeTwo.native='handleChange' :test='test' />
      </div>
    </template>
    
    <script>
    import Two from './Two.vue'
    
    export default {
        name: 'one',
        data() {
            return {
                value: 10,
                test: 'hello'
            }
        },
        methods: {
            handleChange(value, msg) {
              this.value = value
              console.log(msg)
            }
        },
        components: {
            Two
        }
    }
    </script>

    // 第二個(gè)組件
    <template>
        <div class="two">
            <button @click="_change">第二個(gè)組件</button>
            <br/>
            第二個(gè)組件的value：{{$attrs.value}}
            <Three v-bind="$attrs" v-on="$listeners"/>
        </div>
    </template>
    
    <script>
    import Three from './Three.vue'
    
    export default {
        inheritAttrs: false, // 
        name: 'two',
        props: {
            test: String
        },
        created() {
            console.log('-----第二個(gè)組件-----')
            console.log(this.$attrs) // 獲取父級(jí)作用域中綁定在該組件上且沒有在Prop聲明的屬性
            // {value: 10}
            console.log(this.$listeners) // 獲取父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器
            // {change: ?}
        },
        methods: {
            _change() {
                this.$emit('change', 2, '來自第二個(gè)組件的事件觸發(fā)')
            }
        },
        components: {
            Three
        }
    }
    </script>

    // 第三個(gè)組件
    <template>
      <div class="three">
          <button @click="_change">第三個(gè)組件</button>
          <br/>
          第三個(gè)組件中顯示第一個(gè)組件的value：{{$attrs.value}}
      </div>
    </template>
    
    <script>
    export default {
        name: 'three',
        created() {
            console.log('-----第三個(gè)組件-----')
            console.log(this.$attrs)
            console.log(this.$listeners)
        },
        methods: {
            _change() {
                this.$emit('change', 3, '來自第三個(gè)組件的事件觸發(fā)，感謝$listeners')
            }
        }
    }
    </script>

六朗恳、provide / inject（2.2.0 新增）

這對選項(xiàng)需要一起使用湿颅，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深粥诫，并在起上下游關(guān)系成立的時(shí)間里始終生效油航。

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中
provide 選項(xiàng)應(yīng)該是一個(gè)對象或返回一個(gè)對象的函數(shù)怀浆。該對象包含可注入其子孫的屬性谊囚。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作执赡。
inject 選項(xiàng)應(yīng)該是一個(gè)字符串?dāng)?shù)組镰踏，或一個(gè)對象，對象的 key 是本地的綁定名沙合。value 是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)奠伪，或一個(gè)對象。該對象的：from 屬性是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)首懈，default 屬性是降級(jí)情況下使用的 value绊率。
provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的究履。然而滤否，如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的挎袜。

    // one組件
    <template>
      <div class="one">
        data中的b:{顽聂}
        <br>
        可響應(yīng)對象test:{{test}}
        <br>
        <button @click="_change">第一個(gè)組件的按鈕</button>
        <Two/>
      </div>
    </template>
    
    <script>
    import Vue from "vue"
    import Two from './Two.vue'
    import symbol from './symbol'
    
    export default {
      // provide: {
      //   a: 'A'
      // },
      provide () {
        this.test = Vue.observable({ // 可響應(yīng)對象的創(chuàng)建，建議傳響應(yīng)式對象
          count: 0
        })
        return {
          a: 'A',
          test: this.test, // 賦與對象指針
          b: this.b, // 賦值操作
          [symbol.KEY]: 'C',
          one: this,
          onChange: this.handleChange
        }
      },
      name: 'one',
      data () {
        return {
          b: 'B'
        }
      },
      created () {
        console.log('-----第一個(gè)組件-----')
        console.log('data中b=' + this.b)
      },
      methods: {
        handleChange (value, msg) {
          this.b = value
          console.log(msg)
        },
        _change () {
          this.b = 'one....b'
          this.test.count++
        }
      },
      components: {
        Two
      }
    }
    </script>

    // two組件
    <template>
      <div class="two">
        inject中b的值：{盯仪}
        <br>
        inject中test的值：{{test}}
        <br>
        <button @click="onChange">第二個(gè)組件的按鈕</button>
        <Three/>
      </div>
    </template>
    
    <script>
    import Three from './Three.vue'
    import symbol from './symbol'
    
    export default {
      //   inject: ['a', 'b'],
      inject: {
        a: {
          default: 'AA'   // 在 2.5.0+ 的注入可以通過設(shè)置默認(rèn)值使其變成可選項(xiàng)
        },
        b: {
          from: 'b',  // 如果它需要從一個(gè)不同名字的屬性注入紊搪，則使用 from 來表示其源屬性
          default: 'no value！'
        },
        key: {
          from: symbol.KEY,
          default: () => ['no', 'value'] // 與 prop 的默認(rèn)值類似全景，你需要對非原始值使用一個(gè)工廠方法
        },
        one: {
          default: () => ({})
        },
        _change: { // 命名與子組件沖突可以更改別名
          from: 'onChange'
        },
        test: {
          from: 'test'
        }
      },
      name: 'two',
      props: {
        two_p_b: {
          default () {
            return this.b
          }
        }
      },
      data () {
        return {
          two_d_b: this.b
        }
      },
      created () {
        console.log('-----第二個(gè)組件-----')
        console.log('inject注入的a=' + this.a)
        console.log('inject注入的b=' + this.b)
        console.log('-------------------')
        console.log('inject注入整個(gè)one組件')
        console.log(this.one)
        console.log('-------------------')
        console.log('props中b=' + this.two_p_b)
        console.log('data中b=' + this.two_d_b)
        console.log(`inject注入的Symbol類型的key=${JSON.stringify(this.key)}`)
      },
      methods: {
        onChange () {
          if (this.one && this.one.handleChange) {
            // this._change('two', '來自第二個(gè)組件的觸發(fā)')
    
            this.test.count++ // 因?yàn)閠est指向的是個(gè)響應(yīng)式對象耀石，所以可以這么使用
            this.one.b = 'two.....b'
    
            // this.one.handleChange('two', '來自第二個(gè)組件的觸發(fā)')
          }
        }
      },
      components: {
        Three
      }
    }
    </script>

    // three組件
    <template>
      <div class="three">
        inject中b的值：{}
        <br>
        計(jì)算屬性中獲取b的值：{{getB}}
        <br>
        inject中test的值：{{test}}
        <br>
        計(jì)算屬性中獲取test的值：{{getTest}}
        <br>
        <button @click="_change">第三個(gè)組件的按鈕</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'three',
      inject: ['onChange', 'one', 'test', 'b'], // 其余和two組件中的使用基本一致爸黄，這里不一一列舉了
      created () {
        console.log('-----第三個(gè)組件-----')
        console.log('inject注入整個(gè)one組件')
        console.log(this.one)
      },
      computed: {
        getTest () {
          return this.test
        },
        getB () {
          return this.b
        }
      },
      methods: {
        _change () {
          if (this.one && this.one.handleChange) {
            this.onChange('three.....b', '來自第三個(gè)組件的觸發(fā)')
            this.test.count++
            // this.one.handleChange('three', '來自第三個(gè)組件的觸發(fā)')
          }
        }
      }
    }
    </script>

    // symbol.js文件的內(nèi)容
    const KEY = Symbol()
    
    export default {
        KEY
    }

七滞伟、$parent

指定已創(chuàng)建的實(shí)例之父實(shí)例揭鳞，在兩者之間建立父子關(guān)系。子實(shí)例可以用 this.$parent 訪問父實(shí)例梆奈，子實(shí)例被推入父實(shí)例的 $children 數(shù)組中野崇。

節(jié)制地使用 $parent 和 $children - 它們的主要目的是作為訪問組件的應(yīng)急方法。更推薦用 props 和 events 實(shí)現(xiàn)父子組件通信亩钟。

    // Father組件
    <template>
      <div id="father">
        <Child/>
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    
    export default {
      name: 'father',
      data () {
        return {
          msg: 'hello'
        }
      },
      created () {
        this.$nextTick(() => {
          console.log(this.$children)
        })
      },
      components: {
        Child
      }
    }
    </script>

    // Child組件
    <template>
      <div class="child">
        父組件的值：{{$parent.msg}}
        <br>
        <input type="text" @change="change">
      </div>
    </template>
    
    <script>
    export default {
      name: 'Child',
      created () {
        console.log(this.$parent)
      },
      methods: {
        change(e) {
          this.$parent.msg = e.target.value
        }
      }
    }
    </script>

八乓梨、EventBus

聲明一個(gè)全局Vue實(shí)例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽都存儲(chǔ)到這個(gè)變量上清酥。這樣就達(dá)到在組件間數(shù)據(jù)共享了扶镀，有點(diǎn)類似于 Vuex。

這種方式只適用于極小的項(xiàng)目焰轻，復(fù)雜項(xiàng)目還是推薦 Vuex臭觉。
不僅可以在父子組件通信，兄弟組件也可以實(shí)現(xiàn)通信辱志。

    // Father組件
    <template>
      <div class="father">
        <h3>父組件Father</h3>
        父組件監(jiān)聽子組件Child的傳值：{{value}}
        <br>
        <Child/>
        <br>
        <child-b/>
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    import ChildB from './ChildB.vue'
    import eventBus from './bus.js'
    
    export default {
      name: 'father',
      data () {
        return {
          value: ''
        }
      },
      created() {
        // 事件監(jiān)聽
        eventBus.$on('change', (value) => {
          this.value = value
        })
      },
      components: {
        Child, ChildB
      }
    }
    </script>

    // Child組件
    <template>
      <div class="child">
        <h3>子組件Child</h3>
        子組件監(jiān)聽兄弟組件ChildB的傳值：{{value}}
        <br>
        子組件Child的輸入框：<input type="text" @change="_change">
      </div>
    </template>
    
    <script>
    import eventBus from './bus.js'
    
    export default {
      name: 'Child',
      data () {
        return {
          value: ''
        }
      },
      created () {
        // 事件監(jiān)聽
        eventBus.$on('changeB', (value) => {
          this.value = value
        })
      },
      methods: {
        _change (e) {
          eventBus.$emit('change', e.target.value)
        }
      }
    }
    </script>

    // ChildB組件
    <template>
      <div class="childB">
        <h3>子組件ChildB</h3>子組件ChildB的輸入框：
        <input type="text" @change="_change">
      </div>
    </template>
    
    <script>
    import eventBus from './bus.js'
    
    export default {
      name: 'ChildB',
      methods: {
        _change (e) {
          eventBus.$emit('changeB', e.target.value)
        }
      }
    }
    </script>

九蝠筑、$root

當(dāng)前組件樹的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例荸频，此實(shí)例將會(huì)是其自己菱肖。

通過訪問根組件也能進(jìn)行數(shù)據(jù)之間的交互客冈，但極小情況下會(huì)直接修改父組件中的數(shù)據(jù)旭从。

十、Vuex

官方推薦的场仲，Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式和悦。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化渠缕。

推薦使用在全局狀態(tài)管理多的情況使用（中大型項(xiàng)目）鸽素。
例如路由訪問控制、用戶信息存儲(chǔ)亦鳞、權(quán)限樹馍忽、檢測登錄狀態(tài)等場景使用Vuex更好。

十一燕差、broadcast和dispatch

vue1.0中提供了這種方式遭笋，但vue2.0中沒有，但很多開源軟件都自己封裝了這種方式徒探，比如min-ui瓦呼、element-ui和iview等。

broadcast是尋找指定子輩組件测暗，然后觸發(fā)事件央串，可理解為廣播磨澡。
dispatch是尋找指定的祖輩組件，然后觸發(fā)事件质和，可理解為調(diào)度稳摄。
一般都作為一個(gè)mixins去使用, 本質(zhì)上這種方式還是on和emit的封裝，但在一些基礎(chǔ)組件中卻很實(shí)用饲宿。

    function broadcast(componentName, eventName, params) {
      this.$children.forEach(child => {
        // 遍歷子組件
        var name = child.$options.name // 獲取子組件的組件名
    
        if (name === componentName) {
          // 判斷是不是要派發(fā)的子組件
          child.$emit.apply(child, [eventName].concat(params)) // 調(diào)用子組件的派發(fā)方法
        } else {
          broadcast.apply(child, [componentName, eventName].concat([params])) // 否則this交給子組件秩命，尋找孫子組件中是否存在
        }
      })
    }
    export default {
      methods: {
        // 調(diào)度
        dispatch(componentName, eventName, params) {
          var parent = this.$parent || this.$root // 獲取父組件
          var name = parent.$options.name /// 獲取父組件的組件名
    
          while (parent && (!name || name !== componentName)) {
            // 判斷父組件是否存在 && （父組件名是否為空 || 父組件名不等于要派發(fā)的組件名）
            parent = parent.$parent // 獲取父組件的父組件
    
            if (parent) {
              // 如果父組件的父組件存在
              name = parent.$options.name // 獲取父組件的父組件的組件名
            }
          }
          // 結(jié)束循環(huán)
          if (parent) {
            // 判斷有沒有找到要派發(fā)的父級(jí)組件
            parent.$emit.apply(parent, [eventName].concat(params)) // 調(diào)用父級(jí)的派發(fā)方法
          }
        },
        // 廣播
        broadcast(componentName, eventName, params) {
          broadcast.call(this, componentName, eventName, params) // this指向當(dāng)前調(diào)用該方法的父組件
        }
      }
    }

更多詳細(xì)內(nèi)容，請前往GitHub查看