前言

因为vue2去除了父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的，控制台会报如下错误:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result"     (found in component )

解决办法

在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去，父组件利用自定义事件接受该值

子组件

<template>
<div class="popup-bg" v-bind:class="{active:show}">
    <div class="popup">
        <div class="info">
            {{content}}
        </div>
    </div>
</div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                timers: [],
                show: this.isActive
            }
        },
    props: {
        content: {},
        isActive: {
            type: Boolean
        },
    },
    created(){

    },
    methods: {
        autoClose(){
            const t = setTimeout(() => {
                this.show = false;
            }, 1000);
            this.timers.push(t)
        }
    },
    watch: {
        isActive: function (val) {
            //清空一下timers
            if(this.timers){
                this.timers.forEach(timer=>{
                    window.clearTimeout(timer);
                })
            }
            this.show = val
            this.timers = [];
            this.autoClose();
        },
        show:function (val) {
            this.$emit("on-result-change",val);//发送副本给父组件
        }

    }
    }
</script>

父组件

   <template>
    <div class="index">
        <v-header :isActive="false" :title="title"></v-header>
        <div class="content">
            <button @click="show_">点击</button>
            <recruit-info></recruit-info>
        </div>
        <div class="footer">
            <v-footer></v-footer>
        </div>
        <popup :content="content" :isActive="show" @on-result-change="onResultChange">     </popup>
    </div>
  </template>
   <script type="text/ecmascript-6">
      import header from '../../component/header/header.vue';
      import footer from '../../component/footer/footer.vue';
      import recruitInfo from '../../component/recruit-info/recruit-info.vue'
      import popup from '../../component/popup/popup.vue'
      export default{
         data(){
             return {
                title: String,
                 show: Boolean,
                 content: "",

            }
        },
        created (){
            this.title = "拉勾网";
            this.show = false

        },
        components: {
            "v-header": header,
            "v-footer": footer,
            "recruit-info": recruitInfo,
            "popup": popup
        },
        methods: {
            show_: function () {
                this.content = "hello world";
                this.show = true
            },
            onResultChange(val){//自定义事件接受子组件传递过来的参数
                this.show = val
            }
        }

        }
    </script>
    <style lang="stylus" rel="stylesheet/stylus">
    .index
        position: relative
        height: 100%
        .content
            overflow: auto
            overflow-x: hidden
            padding-bottom: 45px
        .footer
            position: fixed
            bottom: 0
            height: 45px
            width: 100%

    </style>
    ```