Vue子传父案例

一.html

     
  
  

二.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);
      
    }
  }
})

你可能感兴趣的:(Vue子传父案例)