vue父子組件通訊

1.父向子組件通訊經過props傳值

//父組件
<template>
    <header-box :header-title="title"></header-box>
</template>
<script>
    import header from './header';
    export default{
        name:'index',
        data(){
            return{
                title:'首頁'
            }
        },
        components:{
           'header-box':header,
       }
    }
</script>
//子組件
<template>
    <div>{{textTitle}}</div>
</template>
<script>
    export default{
        name:"header",
        props:['header-title'],
        data(){
            return{
                textTitle:this.header-title
            }
        },
    }
</script>

2.子組件向父組件通訊子組件定義一個事件用$emit傳值

//子組件
<template>
    <button @click="incrementCounter">{{num}}</button>
</templete>
<script>
export default{
    name:'button',
    data(){
        return{
            num:0,
        }
    },
    metheds:{
        incrementCounter：function(){
            this.$emit("change-value",this.num++)
        }
    }
}
</script>
//父組件
<template>
    <button-center @change-value="num"></button-center>
</template>
<script>
import button from "./button"
export default{
    name:'parent',
    data(){
        return{
            counter:0,
        }
    },
    components:{
        "buttonCenter":button
    },
    metheds:{
        num:function(){
            this.counter++
        }
    }
}
<script>