Vue props父组件向子组件传递数据与$emit子组件向父组件传递数据

如果需要子父级组件传递参数，就必须要有子父级关系，所以创建一个Parent.vue和一个Child.vue 。父组件中引入子组件，如图：

父组件代码

<template>
    <div>
        <h1>父组件</h1>
        <Child :title="getTitle" @ReceiveData="setData"></Child>
        <!--父组件向子组件传递数据以属性的方式进行传递 如：:title="getTitle"-->
        <!--父组件接收子组件传递过来的数据 把子组件设置的Key当成自定义事件来接收数据 如：@ReceiveData="setData"-->
        {{msg}}
    </div>
</template>

<script>
    import Child from './Child'//父组件中引入子组件
    export default {
        name: "Parent",
        data(){
            return{
                getTitle:'父组件向子组件传递的数据',
                msg:''
            }
        },
        components:{
            Child
        },
        methods:{
            setData(data){
                this.msg = data//把子组件传递过来的数据赋值给msg
            }

        }
    }
</script>

<style scoped>

</style>

子组件代码

<template>
    <div>
        <h1>这是子组件</h1>
        {{title}}
        <!--把父组件传递过来的数据进行渲染-->
        <button @click="Transmit">点击按钮子组件向父组件传递数据</button>
    </div>
</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                setTransmit:'子组件向父组件传递的参数'
            }
        },
        props:{//子组件中用props接收父组件传递的数据
            title:{
                type:String,//验证传递的数据类型
                default:'默认值'//给传递过来的数据添加默认值，如果没有传递数据则显示default中的信息
            }
        },
        methods:{
            Transmit(event){
                //子组件向父组件传递数据使用this.$emit  里面有两个参数 1、Key  2、数据
                this.$emit('ReceiveData',this.setTransmit)
            }
        }
    }
</script>

<style scoped>

</style>