1-11 emit和prop

    子父组件相互通信

这是父组件

<template>
    <div>
        父组件
        <input type="text" v-model="num">
        <Child @sendMsg="getMsg" :num="getNum"/>
        {{info}}
    </div>
</template>
<script>
import Child from "./child"
export default {
    name:"parent",
    data(){
        return{
            info:'',//初始化
            num:0
        }
    },
    //将num进行类型转换处理(String类型转Number类型)
    computed:{
        getNum(){
            return this.num - 0; 
        }
    },
    //注入子组件
    components:{
        Child
    },
    //在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
    methods:{
        getMsg(data){
            //参数data就是子组件通过事件出来的数据
           this.info=data;
        }
    }
}
</script>
<style scoped>

</style>

这是子组件

<template>
    <div>
        子组件
        <button @click="sendMsg">传递</button>
    </div>
</template>
<script>
export default {
    name: "child",
    data() {
        return {
            msg: '我是子组件数据'
        }
    },
    props:{
        num:{
            type:Number,
            Default:5
        }
    },
    //运算
    computed:{
        addNum(){
            return this.num*5;
        }
    },
    methods: {
        sendMsg(event) {
            //两个参数：参数1：key 参数2：数据
            //$emit()——把事件沿着作用域链向上派送。（触发事件）
            this.$emit("sendMsg", this.addNum)//计算属性的函数不需要加调用
            //触发一个叫做sendMsg的事件，同时把第二个参数数据传递给事件对应的处理函数
        }
    }
}
</script>
<style scoped>

</style>

        效果图：