用vue写一个新闻列表

好的，下面是一个简单的新闻列表的Vue组件示例代码：

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <a :href="article.url">{{ article.title }}</a>
        <p>{{ article.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    articles: {
      type: Array,
      required: true,
    },
  },
};
</script>

这个组件接受两个props：`title`和`articles`，其中`title`为字符串类型的新闻列表标题，`articles`为包含多个新闻对象的数组，每个新闻对象包含`id`、`url`、`title`和`description`属性。组件会在页面中渲染一个包含所有新闻的列表。

在父组件中，你可以使用以下代码来传递数据给这个组件：

<template>
  <div>
    <NewsList :title="listTitle" :articles="newsArticles" />
  </div>
</template>

<script>
import NewsList from './NewsList.vue';

export default {
  components: {
    NewsList,
  },
  data() {
    return {
      listTitle: 'Latest News',
      newsArticles: [
        {
          id: 1,
          url: 'https://example.com/article-1',
          title: 'Article 1 Title',
          description: 'Article 1 Description',
        },
        {
          id: 2,
          url: 'https://example.com/article-2',
          title: 'Article 2 Title',
          description: 'Article 2 Description',
        },
        // Add more articles here
      ],
    };
  },
};
</script>

在父组件中，你需要导入`NewsList`组件，并将其注册为本地组件。然后，你可以通过props传递标题和新闻列表给子组件`NewsList`。