v-model解决父子组件之间的通信问题:(推荐)
应用场景:当你给子组件提供的数据既要使用,还要修改,这个时候可以使用v-model简化
v-model干了两件事情:
1.通过value把article.cover.images[index]传给了子组件
:value=“article.cover.images[index]”
2.默认监听了input事件,当这个事件触发的时候,你传1的时候,就会把你绑的这个article.cover.images[index]改为1;你传2的时候,就会把article.cover.images[index]改为2
@input=“article.cover.images[index]=事件参数”
代码演示:
父组件:
v-model="article.cover.images[index]"在父组件中绑定好你要交互的数据
<template v-if="article.cover.type > 0">
<upload-cover v-for="(cover, index) in article.cover.type" :key="cover" v-model="article.cover.images[index]"
/>
</template>
子组件:把数据拿回来,然后在渲染到组件中
子组件中有哪些代码
此时父组件传给子组件的数据就用value代替即可,props中绑定的数据也是value
this.$emit(‘input’, res.data.data.url)此时的事件名称改为input
<div class="cover-wrap">
<img
ref="cover-image"
alt=""
class="cover-image"
:src="value"
/>
</div>
export default {
props: ['value']
this.$emit('input', res.data.data.url)
注意点:
当绑定好了数据之后,发生异步数据报错的问题,这是因为子组件的渲染速度比父组件提供数据的速度快导致的,可以给子组件加一个v-if,比如这里的v-if=“channel”
<template>
<div>
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-if="channel">
<van-cell v-for="item in list" :key="item.art_id" :title="item.title" />
</van-list>
</div>
</template>
<script>
import { getArticleRec } from '@/api/article.js'
export default {
name: 'ArticleList',
components: {},
data () {
return {
list: [],
loading: false,
finished: false,
pre_timestamp: null
}
},
props: {
channel: {
type: Object,
required: true
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
onLoad () {
getArticleRec({ channel_id: this.channel.id, timestamp: 189337750000, with_top: 1 }).then(res => {
this.loading = false
console.log(res)
this.list.push(...res.data.data.results)
this.pre_timestamp = res.data.data.pre_timestamp
})
}
}
}