-
// 父组件
<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 方法传入事件的名字，向父组件出发一个事件-->
<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 监听这个事件，实现对父组件数据的改变-->
<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>
