Vue让父组件改变背景色

<template id="erZi">
        <div>
            <!-- 使用  $emit -->
            <!-- <button @click="$emit('change-bgcolor')">想让  父组件中的 背景色</button> -->
            
        </div>
    </template>
    <div id="fuqin">
        <span :style="{backgroundColor:color}">现在看到的世界越来越大，可是心里的世界却越来越小</span>
        <er-zi @change-bgcolor='change($event)'></er-zi>
        
    </div>


    <script>
        Vue.component('er-zi',{
            template:'#erZi',
            //不是要点击事件 改变背景颜色
            created:function(){
                this.$emit('change-bgcolor','pink' )
            }
        });
        const fuqin = new Vue({
            el:'#fuqin',
            data(){
                return{
                    color:''
                }
            },
            methods: {
                change:function(val){
                    console.log(this.color)
                    //this.color='green';
                    this.color=val
                }
            },
            created () {
                
            }
        });
    </script>