1.父?jìng)髯永?i>props
父組件代碼
<template>
????<header-box?:title-txt="showTitleTxt"></header-box>
</template>
<script>
????import?Header?from?'./header'
????export?default?{
????????name:?'index',
????????components:?{
????????????'header-box':?Header
????????},
????????data?()?{
????????????return?{
????????????????showTitleTxt:?'首頁'
????????????}
????????}
????}
</script>
子組件代碼
<template>
????<header>
????????{{thisTitleTxt}}
????</header>
</template>
<script>
????export?default?{
????????name:?'header-box',
????????props:?{
????????????titleTxt:?String
????????},
????????data?()?{
????????????return?{
????????????????thisTitleTxt:?this.titleTxt
????????????}
????????}
????}
</script>
2.通過$on,$emit
? 父組件代碼
<template>
????<div?id="counter-event-example">
??????<p>{{?total?}}</p>
??????<button-counter?v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
????import?ButtonCounter?from?'./buttonCounter'
????export?default?{
????????name:?'index',
????????components:?{
????????????'button-conuter':?ButtonCounter
????????},
????????data?()?{
????????????return?{
????????????????total:?0
????????????}
????????},
????????methods:?{
????????????incrementTotal?()?{
????????????????this.total++
????????????}
????????}
????}
</script>
子組件代碼
<template>
????<button?@click="incrementCounter">{{counter}}</button>
</template>
<script>
????export?default?{
????????name:?'button-counter',
????????data?()?{
????????????return?{
????????????????counter:?0
????????????}
????????},
????????metheds:?{
????????????incrementCounter?()?{
????????????????this.$emit('increment')
????????????????this.counter++
????????????}
????????}
????}
</script>
