vue父子组件传值，实现深度监听对象，双向绑定

实现原理：首先获取数据，然后传递给子组件，然后通过$emit函数触发父组件事件，更新父组件的数据，那么传递给子组件的数据也就更新了，在实现子组件更新数据的时候，传递过来的是一个对象，那么我们就需要深度监听对象。实现双向绑定。

1，获取数据传递给子组件

<template>
    <div class="upload">
        <v-header></v-header>
        <div class="upload-content">
            <infor :data="data" @handleOn="handleOn" @handleChildClass="handleChildClass"></infor>
            <!-- <upload-img :data="data" @handleOn="handleOn" :liveClass="liveClass" :color="color"></upload-img>
            <editor :data="data" @handleOn="handleOn"></editor>
            <live-time :data="data" @handleOn="handleOn"></live-time>
            <submit :data="data" @handleOn="handleOn"></submit> -->
        </div>
    </div>
</template>
<script>
    import VHeader from '@/components/header.vue'
    import infor from '@/components/liveDetail/videoInfor.vue'
    import UploadImg from '@/components/liveDetail/uploadimg.vue'
    import submit from '@/components/liveDetail/submit.vue'
    import LiveTime from '@/components/liveDetail/liveTime.vue'
    import editor from '@/components/liveDetail/editor.vue'
    export default {
        data(){
            return {
              data:JSON.parse(window.localStorage.getItem('data')) || {},
              liveClass: [],
              color:[]
            }
        },
        components: {

            VHeader,
            infor,
            UploadImg,
            submit,
            editor,
            LiveTime

        },
        methods:{
            //传递事件给子组件
            handleOn(data){
                this.data[data.key] = data.val
                window.localStorage.setItem("data",JSON.stringify(this.data))
            },
            //子组件传递给父组件liveClass
            handleChildClass (data) {
              this[data.key] = data.val
            }
        }
    }
</script>
<style scoped>
.upload-content{
    width: 100%;
    background: #f4f4f4;
    padding-top: 50px;
}
</style>

2，子组件通过深度监听父组件的数据，实现双向绑定

<template>
    <div class="infor">

        <h2>直播信息<span class=