app.vue
<template>
<div id="app">
<!-- 第二部:接受 v-on:titleChanged="updateTitle($event)"-->
<second v-bind:title="title" v-on:titleChanged="updateTitle($event)"></second>
<!-- <second v-bind:title="title"></second> -->
</div>
</template>
<script>
进行注册
import Body from './components/Body.vue'
export default {
name:'app',
data(){
return{
title:"传的是一个值"
}
},
methods:{
// 第三步实现 this.title指的是 title:"传的是一个值"
updateTitle(title){
this.title=title;
}
},
components:{
"second":Body
}
}
</script>
<style>
</style>
Body.vue
<template>
<div class="body" v-on:click="changeTitle">
{{title}}
</div>
</template>
<script>
export default{
name:'body',
props:{
title:{
type:String
}
},
data(){
return{
}
},
methods:{
changeTitle:function(){
// 第一步先注册
this.$emit("titleChanged","子向父组件传值");
}
}
}
</script>
<style>
</style>