子组件
<template>
<div v-bind:class="['wrap']">
<div>{{myName}}</div>
<div>床前明月光</div>
<div @click="sendMsgToFatherFn">找爸爸</div>
</div>
</template>
<script>
export default {
name: 'Text-Group',
// props:['myName'],
props:{
myName:String,
},
methods:{
sendMsgToFatherFn(){
this.$emit('fatherFn', '爸爸我爱你')
}
}
}
</script>
<style>
.wrap{
color:blue;
}
</style>
父组件
<template>
<div id="app">
<input type='text' v-model="inputValue" />
<!-- 引入组件 -->
<TextGroup :myName="myName" @fatherFn='fromMySonFn' ></TextGroup>
</div>
</template>
<script>
import TextGroup from './components/Text-Group'
export default {
el:'#app',
data(){
return{
inputValue: '',
listData: [],
isDone:'',
myName:'我要找儿子'
}
},
components:{
TextGroup,
},
methods:{
fromMySonFn(data){
console.log(data)
}
}
}
</script>
步骤
image.png
image.png
