組件通訊

時間 2019-12-08

標籤組件通訊简体版

原文原文鏈接

組件通訊

1.爲何要進行組件通訊vue

組件能夠說是具備獨立功能的總體，可是當咱們要將這些組件拼接在一塊兒的時候，這些組件相互之間要創建聯繫，這個聯繫咱們就稱之爲通訊vuex

2.組件通訊的方式有一下幾種數組

1.父子組件通訊app

使用props來實現dom

2.子父組件通訊函數

自定義事件this

3.非父子組件通訊es5

ref鏈code

bus事件總線component

4.多組件狀態共享（多個組件共用同一個數據）大知識點（vuex）這邊只講前3個

vuex

知識點： app實例的手動掛載

new Vue({
el:'#app'
}).$mount('#app')

父子組件通訊

案例:

<body>
    <div id='app'>
        <father></father>
    </div>


    <template id='father'>
        <div>
            <p>這是Father組件</p>
            <hr>
            <son :qwer = "money"></son>   
            <!-- 子組件作數據綁定   綁定父組件裏面的數據 -->
        </div>
    </template>

    <template id='son'>
        <div>
            <p>這是son組件</p>
            <p>父親給了我{{qwer}}元</p>  
            <!-- 子組件能夠全局調用這個數據 -->
        </div>
    </template>


    <script>
        // props
        //     1.在父組件的模板中將數據用單項數據綁定的形式，綁定在子組件上
        //     2.在子組件的配置項中可使用一個props配置項來接收這個數據,接收時，props的取值能夠是一個數組
        //     3.在子組件模板中，接收到的屬性能夠像全局同樣使用


        // 這裏全局註冊Father這個組件
        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    money: 2000
                }
            }
        })

        // 這裏全局註冊Son這個組件
        Vue.component('Son', {
            template: '#son',
            props: ['qwer'] //子組件用props來接收這個數據
        })


        new Vue({
            el: '#app'
        })
    </script>
</body>

產生的問題:

問題一:props接收的money和子組件上綁定的自定義屬性money是否是同一個?     
      
      不是， 綁定自定義屬性名字能夠自定義（我的通常會寫成同樣的）

      注意：自定義命名不能有大寫字母 用-a來表示

問題二：爲何data要定義一個函數
        1.組件是一個獨立的個體，那麼他應該擁有本身的數據，這個數據應該是一個獨立的數據
        2.也就是說這個數據應該有獨立的做用域（須要一個獨立的使用範圍，這個範圍就是這個組件內）
        3.函數提供了獨立的做用域
        
問題三：爲何data要有返回值？返回值仍是一個對象

        由於Vue是經過observe來觀察data選項的,因此必需要有返回值
        由於Vue要經過es5的Object.defineProperty屬性對對象進行getter和setter設置

子父組件通訊

<body>
    <div id="app">
        <Father></Father>
    </div>

    <template id='father'>
        <div>
            <h3>這裏是father組件</h3>
            <p>兒子給了我{{money}}元錢</p>
            <Son @give='getHongbao'></Son>  
            <!--  這裏是第一步！ 綁定一個自定義事件在子組件身上 -->
        </div>
    </template>

    <template id='son'>
            <div>
                <button @click = 'giveFather'>give</button>
                <h3>這裏是son組件</h3>
            </div>
    </template>


    <script>
        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    money: 0
                }
            },
            methods: {
                getHongbao(val) {
                    console.log(1)
                    this.money = val
                }
            }
        })

        Vue.component('Son', {
            template: '#son',
            data() {
                return {
                    hongbao: 500 //要把這個數據發給父組件 ， 首先要在父組件中定義一個數據用來接收這個數據
                }
            },
            methods: {
                giveFather() {
                    //如何進行父組件給子組件的自定義事件觸發？
                    // 這裏是第二步驟！！！
                    this.$emit('give', this.hongbao)
                }
            }
        })

        new Vue({
            el: '#app',
        })
    </script>

    <!-- 自定義事件
        1.自定義的 經過 $on 定義  $emit用來觸發

        2.經過綁定在組件身上定義   $emit用來觸發 -->


    <!-- 總結：   
            1.在父組件的模板中,經過事件綁定的形式，綁定一個自定義事件在子組件身上 
            
            2.在子組件中 （子組件的配置項methods中）寫一個事件處理函數，在事件處理函數中觸發父組件綁定的自定義事件

            3.將子組件定義的事件處理函數 綁定在子組件的按鈕身上(點擊觸發 實現步驟2) -->
</body>

非父子組件通訊（ref鏈）

<body>
    <div id="app">
        <Father></Father>
    </div>

    <template id="father">
        <div>
            <h3>這裏是father</h3>
            <button @click = 'look'>點擊查看father的this</button>
            <p>father的n: {{ n }}</p>
            <hr>
            <Son ref = 'son'></Son>
            <hr>
            <Girl ref = 'girl' :n = 'n'></Girl>   

            <!-- 經過ref綁定組件後,咱們發如今他們共同父組件的$refs裏面能夠找到子組件 -->

        </div>
    </template>

    <template id="son">
        <div>
            <h3>這裏是son組件</h3>
        </div>
    </template>


    <template id="girl">
        <div>
            <h3>這裏是girl組件</h3>
            <button @click = 'out'> 輸出girl的this </button>
        </div>
    </template>

    <script>
        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    n: 0
                }
            },
            methods: {
                look() {
                    this.n = this.$refs.son.money
                }
            }
        })

        Vue.component('Son', {
            template: '#son',
            data() {
                return {
                    money: 1000
                }
            }
        })

        Vue.component('Girl', {
            template: '#girl',
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                out() {
                    console.log(this)
                    console.log(this.$attrs.n)
                }
            }
        })


        new Vue({
            el: '#app'
        })
    </script>

    <!-- 總結：ref鏈能夠實現非父子組件的通訊,可是若是層級太多就比較繁瑣了 -->
</body>

非父子組件通訊（bus事件總線）

<div id='app'>
        <Bro></Bro>
        <Sma></Sma>
    </div>

    <template id="big">
        <div>
            <h3>這裏是哥哥組件</h3>
            <button @click = 'hick'>揍</button>
        </div>
    </template>

    <template id="sma">
        <div>
            <h3>這裏是弟弟組件</h3>
            <p v-show = 'flag'>嗚嗚嗚嗚嗚嗚wuwuwuu</p>
        </div>
    </template>

    <script>
        var bus = new Vue()

        Vue.component('Bro', {
            template: '#big',
            methods: {
                hick() {
                    bus.$emit('aa');
                }
            }
        })

        Vue.component('Sma', {
            template: '#sma',
            data() {
                return {
                    flag: false
                }
            },
            mounted() {
                var _this = this

                //當前組件掛載結束，也就是咱們在頁面當中看到真實的dom
                //mounted這個鉤子函數的觸發條件是組件建立時會自動觸發
                bus.$on('aa', function() {

                    _this.flag = true

                })
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
    
    <!-- 總結：
        1.在其中一個組件的掛載鉤子函數上作事件的聲明

        2.在另外一個組件中，經過 bus.$emit('事件名稱')來觸發自定義事件 -->

很是規手段（不推薦使用）

子父通訊

<body>
    <div id='app'>
        <Father></Father>
    </div>

    <template id='father'>
        <div>
            <h3>這裏是father組件</h3>
            <p>這裏是父組件的n：{{n}}</p>
            <Son :add = 'add'></Son>
        </div>
    </template>

    <template id='son'>
            <div>
                <h3>這裏是son組件</h3>
                <button @click = 'add(2000)'>give</button>
            </div>
    </template>

    <script>
        //咱們要進行子父組件通訊
        //理解：使用自定義事件實現

        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    n: 0
                }
            },
            methods: {
                add(val) {
                    this.n = val
                }
            }
        })

        Vue.component('Son', {
            template: '#son',
            data() {
                return {
                    money: 1000
                }
            },
            props: ['add']
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>

動態組件

1.什麼是動態組件

能夠改變的組件

2.使用

經過Vue提供了一個component+is屬性使用

3.動態組件指定就是component這個組件

<div id="app">
    <button @click = "change"> 切換 </button>
    <!-- <keep-alive include="">
      <component :is = "type"></component>
    </keep-alive> -->
    
    
    <component :is = "type"></component>

  </div>
</body>
<script>
/* 
  業務： 點擊一個按鈕進行兩個組件的切換

 */
  Vue.component('Aa',{
    template: '<div> Aa </div>'
  })

  Vue.component('Bb',{
    template: '<div> Bb </div>'
  })

  new Vue({
    data: {
      type: 'Aa'
    },
    methods: {
      change () {
        this.type = (this.type === 'Aa'?'Bb':'Aa')
      }
    }
  }).$mount('#app')
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。