父傳子

父組件
<template>
    <div id="app">
        父組件--{{msg}}
        <!--綁定自定義屬性，變量-->
        <o-a :name="msg"></o-a>
    </div>
</template>

<script>
import oA from '@/test/A'
export default{
    data(){
        return{
            msg:'TaylorSwift',
        }
    },
    components:{
        oA
    }
}

</script>

<style scoped="scoped">
*{font-size: .5rem;}
</style>

子組件
<template>
    <div id="app">
        子組件--{{name}}
    </div>
</template>

<script>
export default{
//  接收值
    props:{
        name:{
            type:String,
            default:0
        }
    },
    data(){
        return{
            
        }
    }
}
</script>

<style>
</style>

子傳夫

父組件
<template>
    <div id="app">
        父組件--{{msg}}
        <!--用on監(jiān)聽派發(fā)的事件，定義一個事件名-->
        <o-a v-on:child="showchild"></o-a>
    </div>
</template>

<script>
import oA from '@/test/A'
export default{
    data(){
        return{
            msg:'',
        }
    },
    components:{
        oA
    },
    methods:{
//      定義的事件名放在methods
        showchild(res){
            this.msg = res
        }
    }
}

</script>

<style scoped="scoped">
*{font-size: .5rem;}
</style>

子組件
<template>
    <div id="app">
        子組件--{{name}}
        <button @click="son">子組件</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            name:'TaylorSwift'
        }
    },
    methods:{
        son(){
//          派發(fā)事件,參數
            this.$emit("child",this.name)
        }
    }
}
</script>

<style>
</style>

如有不懂，可以看我的 Vue-組件通信