<div id="app">
  <cpn :c-hello="hello" :c-world="world" @item-click="itemclick"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>{{cHello}}</h2>
    <p>{{cWorld}}</p>
<!--    <ul>-->
<!--      <li v-for="item in cSelectArr" @click="btnclick" v-model:item="item">{{item}}</li>-->
<!--    </ul>-->
    <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [{
          id:'aaa',
          name:'熱門推薦'
        },{
          id:'bbb',
          name:'手機(jī)數(shù)碼'
        },{
          id:'ccc',
          name:'電腦辦公'
        }]
      }
    },
    methods: {
      btnclick(item) {
        console.log(item.id)
        this.$emit('item-click',item)
      }
    },
    props:{
      cHello: {
        type: String,
        default: 'hello李鵬飛'
      },
      cWorld:String
    }
  }
  const app = new Vue({
    el: '#app',
    data: {
      hello:'hello我是強(qiáng)喜娜娜',
      world:'world:我是李鵬飛',
      selectArr: [1,2,3,4,5,6,7,8,9]
    },
    components: {
      cpn
    },
    methods: {
      itemclick(e) {
        console.log('父組件打印的數(shù)據(jù)信息')
        console.log(e.name)
      }
    }
  })
</script>