起步 - 從場景中看父子組件間通訊

時間 2021-07-25

標籤 html vue ide this spa code component htm blog 欄目 HTML 简体版

原文原文鏈接

組件間通訊是組件開發的，咱們既但願組件的獨立性，數據能互不干擾，又不可避免組件間會有聯繫和交互。html

在vue中，父子組件的關係能夠總結爲props down，events up；vue

在vue2.0中廢棄了$dispatch和$broadcast，子組件使用event發出自定義事件ide

父子組件之間的通訊

思考場景以下：ui

　　一個總羣（父組件）中你們作自我介紹，this

　　陌陌、小小、可可、每天收到總羣發來的消息以後（父傳子），將本身的信息發送到總羣（子傳父）spa

父組件

templatecode


<template>
    <div>
        <h4>父組件>></h4>
        <div>
            <span>{{ somebody }}</span> 說: 我來自 <span>{{ city }} </span>
        </div>
        <hr>
        <!-- aGirls和noticeGirl經過props傳遞給子組件 -->
        <!-- introduce經過$emit子組件傳遞給父組件 -->
        <v-girl-group :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></v-girl-group>
    </div>
</template>

我使用的組件間通訊：component

aGirls和noticeGirl經過 props 傳遞給子組件
經過 $emit 子組件傳遞給父組件，v-on來監聽父組件自定義事件（$emit的變化）

scripthtm

<script>
import vGirlGroup from './components/HelloWorld'
export default {
    name: 'girl',
    components: {
        vGirlGroup
    },
    data () {
        return {
            aGirls:[{
                name:'陌陌',
                city:'GuangZhou'
            },{
                name:'小小',
                city:'BeiJing'
            },{
                name:'可可',
                city:'American'
            },{
                name:'每天',
                city:'HangZhou'
            }],
            somebody:'',
            city:'',
            noticeGirl:''
        }
    },
    methods: {
        introduceSelf (opt) {
            this.somebody = opt.name;
            this.city = opt.city;

            // 通知girl收到消息
            this.noticeGirl = opt.name + ',已收到消息';
        }
    }
}
</script>

這裏的 introduceSelf 就是父組件接收到子組件發出的$emit事件處理程序blog

子組件

template

<template>
    <div>
      <h4>子組件>></h4>
       <ul>
           <li v-for="(value, index) in girls">
                {{ index }} - {{ value.name }} - {{ value.city }} 
                <button @click="noticeGroup(value.name,value.city)">發送消息</button>
            </li> 
       </ul>
       <div class="msg">接收來自父組件的消息:{{ noticeGirl }}</div>
    </div>
</template>

script

子組件經過$emit發出自定義事件

<script>
export default {
    name: 'girl-group',
    props: {
        girls: {
            type: Array,
            required: true
        },
        noticeGirl: {
            type: String,
            required: false
        }
    },
    methods: {
        noticeGroup (name, age) {
            this.$emit('introduce',{
                name: name,
                age: age
            })
        }
    }
}
</script>