vue2 用插槽写一个新闻列表

好的，以下是一个示例的新闻列表组件代码：

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <slot name="news-item" v-for="item in news">
        <li>{{ item }}</li>
      </slot>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    news: Array
  }
}
</script>

在这个组件中，我们定义了一个 `title` 属性和一个 `news` 数组属性，用于显示新闻列表的标题和内容。我们使用了一个 `<slot>` 元素来允许父组件传递新闻列表项的自定义内容。具体来说，我们使用了一个 `name` 属性来指定插槽的名称为 `news-item`，并使用 `v-for` 指令遍历 `news` 数组，将每个新闻项作为插槽内容传递到父组件中。

父组件可以像下面这样使用这个新闻列表组件：

<template>
  <div>
    <news-list :title="title" :news="news">
      <template v-slot:news-item="{ item }">
        <li>{{ item.title }} - {{ item.date }}</li>
      </template>
    </news-list>
  </div>
</template>

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

export default {
  components: { NewsList },
  data() {
    return {
      title: 'Latest News',
      news: [
        { title: 'News 1', date: '2021-01-01' },
        { title: 'News 2', date: '2021-01-02' },
        { title: 'News 3', date: '2021-01-03' }
      ]
    }
  }
}
</script>

在这个父组件中，我们引入了新闻列表组件，并将 `title` 和 `news` 属性绑定到组件上。我们使用了一个 `<template>` 元素来定义 `news-item` 插槽的内容，接收一个名为 `item` 的插槽作用域变量，并将其展示为一个标题和日期的列表项。

这样就完成了一个简单的新闻列表组件，并且通过插槽可以让父组件自定义列表项的展示方式。