- 通過 Prop 向子組件傳遞數(shù)據(jù)
-
// 父組件
<Child :message='123'></Child> // 綁定一個屬性
-
<!--子組件-->
<template>
<div>
<h2>{{msg}}</h2>
<span>{{ message }}</span> <!--展示接收屬性的值-->
</div>
</template>
<script>
export default {
name: 'child',
props: ['message'], // 接收message屬性
data(){
return {
msg:'這是子組件'
}
}
}
</script>
-
<!--子組件-->
<template>
<div>
<h2>{{msg}}</h2>
<!--點擊事件，通過 $emit 方法傳入事件的名字误债，向父組件出發(fā)一個事件-->
<span v-on:click="$emit('enlarge'料饥，1)">{{ message }}</span>
</div>
</template>
<script>
export default {
name: 'child',
props: ['message'],// 接收message屬性
data(){
return {
msg:'這是子組件'
}
}
}
</script>
-
<!--父組件-->
<template>
<div class="hello" >
<div >
<h1>{{ msg }}--{{postFontSize}}</h1>
<!--v-on 監(jiān)聽這個事件澳厢，實現(xiàn)對父組件數(shù)據(jù)的改變-->
<Child v-on:enlarge="postFontSize+=$event" :message='123'></Child>
</div>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'HelloWorld',
data () {
return {
msg: '這是父組件',
postFontSize: 1
}
},
components: {
Child
}
}
</script>
