数据传递（父传子）

1.首先在父组件script中导入子组件

import Child from './child'

并且在父组件中写入<child></child>并绑定需要传递的父组件中的数据num

<child @sendmsg="getmsg" :num="num"></child>

2.在子组件中props要传的数据

        num:{
            type:Number,
            default:5
        }
    },

3.在子组件中

{{num}}即可

数据传递（子传父）

case：传子组件中的msg

1.需要在子组件中写一个发送的方法

      sendMsg(event){

        this.$emit("sendmsg",this.addNum)

        }

    }

sendmsg为key，this.msg为value

2.在父组件中的<chlid></chlid>中用该事件去绑定父组件中的方法

<child @sendmsg="getmsg" :num="num"></child>

        getmsg(data){

          this.info=data;

        }

      }

info去接收传过来的数据

父组件中写{{info}}即可接收到子组件中的msg里面的信息

贴上父组件代码

<template>
    <div>父组件
        {{info}}
        <input v-model="num"></input>
        <child @sendmsg="getmsg" :num="num"></child>
    </div>
</template>

<script>
import Child from './child'
export default {
    name:"parents",
    data(){
        return{
            num:10,
            info:"dododo",
        }
    },
    components:{
        "child":Child,
    },
    methods:{
        getmsg(data){
           this.info=data;

        }
    }
    
}
</script>

<style>

</style>

贴上子组件代码

<template>
    <div>子组件
        {{num}}
        <button @click="sendMsg">传递</button>
    </div>
</template>

<script>
export default {
    name:"child",
    data(){
        return{
            msg:"lalalalala",
        }
    },
    props:{
        num:{
            type:Number,
            default:5
        }
    },
    computed:{
        addNum(){
            return this.num*5;
        }
    },
    methods:{
        sendMsg(event){
            this.$emit("sendmsg",this.msg)
        }
    }
    
}
</script>

<style>

</style>