＜Articles v-if=“!loading“ :articles=“props.articles“ /＞的区分

问:

<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" />这句代码什么意思?

回答:

总结:

是:articles所以是props要是@articles就是emits