问:
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Articles from '../article/lists.vue'
const route = useRoute()
const orderby = ref('hot')
const props = defineProps<{
articles: ArticleType[]
loading: boolean
}>()
const emit = defineEmits<{
(e: 'onFilter', json: Record<string, string>): void
}>()
const onFilter = (e: MouseEvent) => {
let dom: any = e.target
orderby.value = dom.dataset.val
emit('onFilter', { orderby: orderby.value })
}
onMounted(() => {
orderby.value = (route.query['orderby'] as string) || 'hot'
})
</script>
<template>
<div class="main-articles">
<div class="cus-tabs-header">
<ul @click="onFilter">
<li data-val="hot" :class="{ active: orderby == 'hot' }">最热</li>
<li data-val="new" :class="{ active: orderby == 'new' }">最新</li>
</ul>
</div>
<Articles v-if="!loading" :articles="props.articles" />
<div v-show="loading" style="padding: 20px">
<el-skeleton animated />
</div>
</div>
</template>
<style lang="less">
.main-articles {
background: #fff;
border-radius: 4px;
flex: 1;
}
</style>
分析代码<Articles v-if="!loading" :articles="props.articles" />这句代码什么意思?
回答:
总结:文章来源：https://www.toymoban.com/news/detail-800448.html
是:articles所以是props要是@articles就是emits文章来源地址https://www.toymoban.com/news/detail-800448.html
到了这里，关于＜Articles v-if=“!loading“ :articles=“props.articles“ /＞的区分的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
