父组件
<template>1
<div id="app">
父组件--{{msg}}
<o-a :name="msg"></o-a>
</div>
</template>
<script>
import oA from '@/test/A'
export default{
data(){
return{
msg:'TaylorSwift',
}
},
components:{
oA
}
}
</script>
<style scoped="scoped">
*{font-size: .5rem;}
</style>
子组件
<template>
<div id="app">
子组件--{{name}}
</div>
</template>
<script>
export default{
// 接收值
props:{
name:{
type:String,
default:0
}
},
data(){
return{
}
}
}
</script>
<style>
</style>
子传父
<template>
<div id="app">
父组件--{{msg}}
<o-a v-on:child="showchild"></o-a>
</div>
</template>
<script>
import oA from '@/test/A'
export default{
data(){
return{
msg:'',
}
},
components:{
oA
},
methods:{
// 定义的事件名放在methods
showchild(res){
this.msg = res
}
}
}
</script>
<style scoped="scoped">
*{font-size: .5rem;}
</style>
子组件
<template>
<div id="app">
子组件--{{name}}
<button @click="son">子组件</button>
</div>
</template>
<script>
export default{
data(){
return{
name:'TaylorSwift'
}
},
methods:{
son(){
// 派发事件,参数
this.$emit("child",this.name)
}
}
}
</script>
<style>
</style>
