Vue子传父案例

一.html

     <!-- 在子组件中，通过$emit()来触发事件
  在父组件中，通过v-on来监听子组件事件 -->
  <!-- 父组件模版 -->
  <div id="app">
<cpn @itemclick ="cpnClick"></cpn>
  </div>
  <!-- 子组件模版 -->
  <template id="cpn">
    <div>
       <button v-for ="item in movies" @click ="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

二.script

     //子组件
const cpn ={
 template:"#cpn",
 data () {
   return {
     movies:[
      {id : "aaa" , name : "家用电器"},
      {id : "bbb" , name : "数码宝贝"},
      {id : "ccc" , name : "硕果累累"},
      {id : "ddd" , name : "南拳北斗"},
     ]   
   }
 },
     methods: {
       btnClick(item){
         //发射事件
         this.$emit('itemclick',item) //(事件名称(这里自定义的)，传递过去的参数)
       }
     }
 }
  //root组件
const app = new Vue({
  el:"#app",
  data:{
    message:'哈哈',
  },
  components:{
    cpn
  },
  methods: {
    cpnClick(item){
      console.log('cpnClick',item);
      
    }
  }
})