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

最新推荐文章于 2023-04-26 15:50:44 发布

Blockchain_KT

最新推荐文章于 2023-04-26 15:50:44 发布

阅读量491

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue js react 小程序 javascript

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110246520

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

父子组件通信-子传父（自定义事件）

一丶子级向父级传递

props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中
我们需要用自定义事件来完成
什么时候需要自定义事件呢？
- 当子组件需要向父组件传递数据时，就要用到自定义事件
- v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件
自定义事件的流程：
- 在子组件中，通过$emit()来监听事件
- 在父组件中，通过v-on来监听子组件事件
简单例子：
- 我们之前做过两个按钮+1和-1，点击修改counter
- 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件
- 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total

二丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/27 20:25-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
  <cpn @itemclick="cpnclick"></cpn>
</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>

三丶运行结果

在这里插入图片描述

——天生我材必有用，千金散尽还复来——

Blockchain_KT

关注

1
点赞
踩
1

收藏

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

父子组件通信-子传父（自定义事件）一丶子级向父级传递二丶案例代码三丶运行结果——天生我材必有用，千金散尽还复来——一丶子级向父级传递props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中我们需要用自定义事件来完成什么时候需要自定义事件呢？当子组件需要向父组件传递数据时，就要用到自定义事件v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件自定义事件的流程：在子组件中，通过$emit()来监听事件在父组件中，通过v-on来监听子组件事
复制链接

扫一扫