父子组件之间的通信

父子组件之间的通信

概念：A组件中调用B组件，那么A组件就是父组件，B组件就是子组件

通信方式：

父组件向子组件传递数据——使用props

子组件向父组件传递数据——使用this.$emit暴露一个function给父组件

---

例子

子组件(一般是组件)

<template>
    <div>
        <div class="father-to-son">
            {{name}}
            <div v-if="myHead">
                show my head
            </div>
            <div>
                <div v-for="item in myList" :key="item.value"
                :label="item.label"
                :value="item.value">
                    {{item.label}} {{item.value}}
                    <br>
                </div>
                <el-input :placeholder="myPlaceholder"></el-input>
            </div>         
        </div>
        <hr>
        <hr>
        <div class="son-to-father">
            <el-input placeholder="子组件给父组件" v-model="message"></el-input>
            <el-button type="success" @click="toFather">抛数据给父组件</el-button>
        </div>    
        
    </div>    
</template>
<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        },
        myHead: {
            type: Boolean,
            default: true
        },
        myList: {
            type: Array,
            default: () =>[
                {
                    value: '1',
                    label: '测试1'
                },
                {
                    value: '2',
                    label: '测试2'
                }
            ]
        },
        myPlaceholder: {
            type: String,
            default: ''
        }
    },
    data(){
        return{
            message: '',
        }
    },
    methods:{
    	//这个方法暴露给父组件，父组件调用然后更新数据
        toFather(){
            let res = this.message;
            this.$emit("toFather",res);
        }
    }
    
}
</script>
<style scoped>

</style>

父组件（显示的界面）

<template>
    <div class="father">
        <test 
            :my-head="myHead"
            :name="nnn"
            :my-list="myList"
            :my-placeholder="myPlaceholder"
            @toFather="updateMessage">  //父组件更新数据
        </test> 
        
    </div>    
</template>
<script>
import test from './Test.vue'
export default {
    components:{
        test
    },
    data(){
        return{
            myHead: true,
            nnn: '你好',
            myList:[{
                value: '1',
                label: '你好世界'
            },{
                value: '2',
                label: '333333'
            }],
            myPlaceholder:"你猜猜我是啥子",
            message: '',
        }
    },
    methods:{
        updateMessage(res){
            this.message = res;
            alert(this.message);
        }
    }
}
</script>
<style scoped>

</style>