Vue 生命周期和数据共享详解

<Son :msg="message" :user="userinfo"></Son>

export default {
    data() {
        return {
            message: 'hello son',
            userinfo: {
                name: 'pingting',
                age: 18
            }
        }
    }
}

<div>
    <h3>Son 组件</h3>
    <p>父组件传过来的 msg： {{ msg}} </p>
    <p>父组件传过来的 user：{{ user}} </p>
</div>

export default {
    props: ['msg' , 'user']
}

export default {
    data(){
        return {
            // 子组件的数据
            count: 0
        }
    },
    methods: {
        add(){
            this.count += 1
            // 触发一个自定义事件并且传递参数
            this.$emit('numChange' , this.count)
        }
    }
}

<Right @numChange="getNewCount"></Right>

export default {
    data() {
        return {
            // 接收 right 传过来的 count
            countFather: 0
        }
    },
    methods: {
      getNewCount(val){
        this.countFather = val
      }
    }
}

import Vue from 'vue'
export default new Vue()

<button @click="sendStr">发送数据给 Right </button>

import bus from './eventBus.js'
export default {
    data(){
        return {
            str: '这是Son的str数据，将要共享出去'
        }
    },
    methods: {
        sendStr(){
            // 通过 eventBus 发送数据
            bus.$emit('share' , this.str)
        }
    }
}

<p>从 Son 接受的数据：{{ strFromSon }} </p>

import bus from './eventBus.js'
export default {
    data(){
        return {
            strFromSon: ''
        }
    },
    created() {
        bus.$on('share' , (val) => {
            this.strFromSon = val
        })
    }
}