vue学习总结--组件通信（子传父）

最新推荐文章于 2022-08-30 20:02:37 发布

the coderwu

最新推荐文章于 2022-08-30 20:02:37 发布

阅读量141

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_43586337/article/details/104587525

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

组件的父子通信由自定义事件来完成

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时
v-on不仅可以用于监听DOM事件，也可以用于组件间的自定义事件

自定义事件的流程：

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

完整案例代码：(1234分别表示最关键的四步）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
<!--  33333333333333333333333333333333333-->
  <cpn @itemclick="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
<!--11111111111111111111111111111111111111-->
    <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:'手机数码'},
                  {id:'ccc',name:'热门推荐'},
                  {id:'ddd',name:'电脑办公'}
              ]
          }
      },
      methods:{
          btnClick(item){
              //222222222222222222222222222222222222222
              // 发射事件
              this.$emit('itemclick',item)
              //itemclick是事件名称，发射出去的事件
          }
      }
  }
  //父组件
  const app=new Vue({
    el:'#app',
    data:{
      message:'你好'
    },
    components:{
        cpn
    },
    methods:{
        cpnClick(item){
         //44444444444444444444444444444444444444
            console.log('cpnClick',item);
        }
    }
  })
 </script>
</body>
</html>

the coderwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习总结--组件通信（子传父）

组件的父子通信由自定义事件来完成什么时候需要自定义事件呢？当子组件需要向父组件传递数据时v-on不仅可以用于监听DOM事件，也可以用于组件间的自定义事件自定义事件的流程：在子组件中，通过$emit()来触发事件在父组件中，通过v-on来监听组件事件完整案例代码：(1234分别表示最关键的四步）<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫