父传子
- 父组件
<PubTitle title="虚空鼓动 劫火高扬" subTitle="震惊部标题"></PubTitle>
- 子组件
<template>
<view>
<view>{{title}}</view>
<view>{{subTitle}}</view>
<view>{{date}}</view>
<view>文章内容</view>
<view>作者: {{author.title}}</view>
</view>
</template>
<script>
export default {
name:"PubTitle",
props:{
title:{
type:String,
default:""
},
subTitle:{
type:String,
default:""
},
date:{
type:Number,
default:Date.now()
},
author:{
type:Object,
default:{name:"Roy",title:"旅行者"}
}
},
data() {
return {
};
}
}
</script>
<style>
</style>
子传父
- 子组件
<template>
<view>
<input type="text" placeholder="请输入" @input="inputAction" />
</view>
</template>
<script>
export default {
name:"PubTitle",
data() {
return {
};
},
methods:{
inputAction(e) {
this.$emit('updateInputValue',e.detail.value)
}
}
}
</script>
- 父组件
<PubTitle title="虚空鼓动 劫火高扬" subTitle="震惊部标题" @updateInputValue="getInputValue"></PubTitle>
methods: {
getInputValue(e) {
console.log("获取子组件内容:")
console.log(e)
}
}
优化 sync
- 子组件
<template>
<view>
<text>标题: {{title}}</text>
<input type="text" placeholder="请输入" @input="inputAction" />
</view>
</template>
<script>
export default {
name:"PubTitle",
props:{
title:{
type:String,
default:""
}
},
data() {
return {
};
},
methods:{
inputAction(e) {
this.$emit('update:title',e.detail.value)
}
}
}
</script>
- 父组件
<PubTitle :title.sync="title" subTitle="震惊部标题"></PubTitle>
这样就能父子组件通信
