<div id="app" class="demo">
  <post-list></post-list>
 </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
  const app = Vue.createApp({});
  /* 1、什么时候括号包东西，什么时候不包？看没有方法和数据要包
  2、PostListItem  先定义单个贴子的组件，先定义子组件，为什么呢？定义了后面才好用吗？
  */
  const PostListItem = {
    props: {
      /* 接下来有父组件传子组件的情况吗？*/
      post: {
        type: Object,
        default: function() {
          /* 这个习惯用法是干什么的，为什么要用在这里？*/
          return {}
        }
      },
    },
    methods: {
        handleClick() {
          this.$emit("vote")
          /* 传递这个事件，vote，把它传递给父组件，由子组件传，vote是什么呢，子组件里还没有定义吧？一会儿能不能看到是什么情况？*/
        }
      },
     template: `
     <div>
      <h3>标题: {{ post.title }}</h3>
      <p>作者: {{ post.author }} | 发表日期: {{ post.data }} | 点赞数: {{ post.vote }}</p>
      <p><button @click="handleClick">点赞</button></p>
      </div>
     `
    }
    app.component('PostList', {
      data() {
        return {
          posts: [
            {id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0},
            {id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0},
            {id: 3, title: '《Java无难事》怎么样', author: '王五', date: '2020-11-11 15:22:03', vote: 0}
        ]
        }
     },
     components: {
       /* 为什么会有这种单个component出现的情况，为什么要跟在组件定义后面？*/
       PostListItem
     },
     methods: {
       handleVote(id) {
         /*定义handleVote方法
         上面是定义list组件，下面是定义item组件吗？怎么能这么定义组件？是本地注册吗？list那个是全局注册吗？本地注册的模板是怎么样的，忘记了。*/
         this.posts.map(item => {
           item.id === id ? {...item, vote: ++item.vote} : item
           /*这里就超出我的知识范围了*/
         })
       }
     },
     template: `
       <PostListItem 
            v-for = "post in posts"
            :key="post.id"
            :post="post"
            @vote="handleVote(post.id)"/>
     `
    })
app.mount('#app')
    </script>