vue.js---父子组件之间简单的数据传递

入口文件不给了，直接上简单的代码：

parent.vue

<template>
    <div class="parent">
        <input v-model="num" type="text"/>
        <!--给子组件发送数据 -->
        <Son @sendMsg="getMsg" :num="changeNum"/>
        {{ result }}
    </div>
</template>

<script>
    import Son from './son'

    export default{
        name: "Parent",
        data(){
            return{
                result: '',//显示结果
                num: 0,//初始化
            }
        },
        methods:{
            getMsg(data){
                this.result = data;//接收从子组件传递过来的数据
            }
        },
        computed:{
            changeNum(){
                return this.num - 0;//将传递给子组件的数据类型进行转化
            }
        },
        components:{
            Son
        }
    }
</script>

<style>

</style>

son.vue

<template>
    <div class="son">
        <button @click="sendMsg">传递</button>
    </div>
</template>

<script>
    export default{
        name:"son",
        data(){
            return{

            }
        },
        //接受父组件传递过来的数据
        props:{
            num:{
                type:Number,
                default:10
            }
        },
        computed:{
            changeNum(){
                return this.num * 3;
            }
        },
        methods:{
            sendMsg(event){
                //参数含义：键值对
                this.$emit("sendMsg",this.changeNum);
            }
        },
    }
</script>

<style>

</style>

刚接触vue，欢迎大家讨论，嘻嘻。