父 -> 子: 通過 Prop 向子組件傳遞數(shù)據(jù),子組件通過props屬性來接收。
<blog-post title="My journey with Vue"></blog-post>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>' //獲取父組件的值
})
子 -> 父: 父組件自定義事件,子組件利用$emit來完成。
<!--拿到子組件傳遞的數(shù)據(jù)$event即0.1-->
<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>
Vue.component('blog-post', {
props: ['title'],
template: '<h3 v-on:click="$emit('enlarge-text', 0.1)">{{ title }}</h3>'
})