Vue.js：父子组件通信-子传父（自定义事件）

最新推荐文章于 2024-03-25 13:01:07 发布

ikunsdc

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量418

点赞数

文章标签： vue.js javascript

By ikunsdc

本文链接：https://blog.csdn.net/m0_55331605/article/details/114273872

版权

一、子组件向父组件传递数据

子组件向父组件传递数据时，使用自定义事件实现

自定义事件的流程：

在子组件中，通过$emit()来监听事件
在父组件中，通过v-on来监听子组件事件

二、代码


<!--作者：ikunsdc-->
<!--开发时间：2021/03/01 22:43-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
  <cpn @itemclick="cpnclick"></cpn>    <!--父组件监听：如果自定义的itemclick事件发生，则执行父中处理方法-->
</div>
<!--2.子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="itemclick(item)"><!--子组件发送：子组件发送自定义事件，此处按钮点击触发。-->
      {{item.name}}
    </button>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 1.子组件
  const cpn = {
    template: '#cpn',
    data(){
      return{
        categories:[
          {id:'100',name:'热门推荐'},
          {id:'101',name:'手机数码'},
          {id:'102',name:'家用电器'},
          {id:'103',name:'电脑办公'},
        ]
      }
    },
    methods:{
      itemclick(item){
        console.log(item);
        //将item传给父组件，自定义
        //this.$emit('自定义的事件名称'，传送参数）
        this.$emit('itemclick',item)
      }
    }
  }
  //2.父组件
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn
    },
    methods:{
      cpnclick(item){
        console.log('cpnclick',item);
      }
    }
  })
</script>
</body>
</html>

三、运行

ikunsdc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js：父子组件通信-子传父（自定义事件）

一、子组件向父组件传递数据子组件向父组件传递数据时，使用自定义事件实现自定义事件的流程：在子组件中，通过$emit()来监听事件在父组件中，通过v-on来监听子组件事件二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫