使用场景:父组件传递数据给子组件 同时子组件想要修改父组件的数据时。
使用方法
v-bind.sync = data中定义的数据
<template>
<view class="bg-color-F4 reserve-box">
档期
<button @click="btnClick">
btn
</button>
<child v-bind.sync="obj"></child>
</view>
</template>
<script>
import child from './components/child'
export default {
data() {
return {
obj:{
name:"old name",
title:"old title"
}
}
},
watch:{
obj:{
handler(newVal) {
console.log(newVal);
},
deep: true
}
},
created() {
},
methods: {
btnClick(){
uni.navigateTo({
url:`/pages/mealLabel/index`
})
}
},
components: {
child
},
}
</script>
<style scoped lang="scss">
</style>
子组件
<!-- -->
<template>
<view>
<view @click="handleClick">{{title}}</view>
<view @click="changeName">{{name}}</view>
</view>
</template>
<script>
export default {
props: {
// 注意需要展开分别接受
title: String,
name: String
},
data() {
return {};
},
components: {},
computed: {},
mounted() {},
methods: {
handleClick(e) {
this.$emit('update:title', 'new title')
},
changeName() {
this.$emit('update:name', 'new name')
}
}
}
</script>
<style scoped lang="scss">
</style>