父子传值数据共享

**目的：复用公共组件A（父传子组件值，子传父）

父传子
：自定义属性 传值
props:接收自定义属性 ，配置 默认值 数据类型 必填项
子传父 值 事件
父组件@绑定自定义事件
this.$emit(‘自定义事件’，‘值’)
B组件如下：**

<template>
    <div>
        <A :msg="age" :username="userInfo" @numChange="changeSet(val)"></A>
    </div>
</template>

<script>
    import A from '@/components/Props.vue'
    export default {
        components:{
            A
        },
        data: function () {
            return {
                age: 18,
                userInfo: '我是父组件的小明'
            }
        },
        methods: {
            changeSet(val){
                this.val = age
            }
        }
    }
</script>

*A组件如下：

<template>
    <div>
        <p>{{msg}}</p>
        <p>{{username}}</p>
        <button @click="add">click+1</button>
    </div>
</template>
<script>
    export default {
        // props中的私有属性是只读的   否则终端报错
        // props: ['init'],
        props: {
            msg: {
                type: Number
            },
            username: {
                type: String
            }
        },
        data: function () {
            return {
                msg: 1
            }
        },
        methods: {
            add() {
                this.msg += 1
                this.$emit('numChange', this.msg)
            }
        }
    }
</script>