vue中父子组件传值：props和$emit

这个是父页面

<template>
    <el-container>
            <el-header>
                <a @click="change('ce','11')">头1</a>
                <a @click="change('ss212s','11ss')">头2</a>
                {{showData}}
            </el-header>
            <el-main>
                <h1>内容</h1>
                <!-- <el-input v-model="listData"/> -->
                <router-view></router-view>
                <list :listDatas="listData" @sendiptVal='showChildMsg'></list>
            </el-main>
            <el-footer>
                <h1>尾</h1>
            </el-footer>
    </el-container>
</template>
<script>
  import list from  './list'
  export default {
    name: 'app',
    components:{
      list
    },
    data(){
        return{
            showData:"",
            listData:{
                list:{
                    name:"test1",
                    url:"123"
                }
            }
        }
    },
    methods:{
        change(name,url){
            let ab = {
                list:{
                    name:name,
                    url:url
                }
            }
            this.listData= ab;
        },
        showChildMsg(data){
            this.showData = data;
            console.debug(data)
        }
    }
  }
</script>

子页面

<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">{{listDatas.list.name}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">{{listDatas.list.url}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">{{listDatas.list.name}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">{{listDatas.list.name}}</div></el-col>
        </el-row>
        <input type="text" v-model="inputValue" @keypress.enter="enter">
    </div>
</template>

<script>
export default {
    name:"list",
    props:['listDatas'],
    data(){
        return{
            
        }
    },
    methods: {
        enter () {
            this.$emit("sendiptVal", this.inputValue) 
            //子组件发射自定义事件sendiptVal 并携带要传递给父组件的值，
            // 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); 
        }
    }
}
</script>