Vue 中组件通信 - 子传父（自定义事件）this.$emit方法

最新推荐文章于 2024-05-16 21:01:58 发布

hswwqy

最新推荐文章于 2024-05-16 21:01:58 发布

阅读量3.1k

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/hswwqy/article/details/125228458

版权

子传父步骤：

在子组件的 data 里面定义好要传递的数据
在子组件的模版里面正常使用该数据
（一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例）
在子组件的 methods 里面定义 this.$emit(‘itemclick’,item)，
将名字为 itemclick 的自定义事件传给父组件，item 是参数
在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @itemclick=“cpnclick”，即将子组件的 itemclick 事件，转为了自己的 cpnclick 事件，进行操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
    子传父步骤：
        1 在子组件的 data 里面定义好 要传递的数据
        2 在子组件的模版里面正常使用 该数据
        3 （一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例）
        4 在子组件的 methods 里面 定义 this.$emit('itemclick',item)，
          将 名字为 itemclick 的自定义事件传给父组件，item 是参数
        5 在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @itemclick="cpnclick"
          即 将 子组件的 itemclick 事件，转为了 自己的 cpnclick 事件，进行操作
-->

<div id="app">
  <!--  在这接收 子组件传过来的事件-->
  <cpn @itemclick="cpnclick"></cpn>
</div>

<!--子组件模版-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="itemClick(item)">{{item.name}}</button>
  </div>
</template>


<script src="../../JS/vue.js"></script>
<script>

  //  子组件
  const cpn = {
    template: '#cpn',

    data() {
      return {
        categories: [
          {id: 0, name: 'a'},
          {id: 1, name: 'b'},
          {id: 2, name: 'c'},
          {id: 3, name: 'd'},
        ]
      }
    },


    methods: {
      itemClick(item) {
        //  通过 $emit 来向父组件发射事件（信息）,自定义事件
        this.$emit('itemclick', item)
      }
    }
  }


  // 父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀'
    },

    components: {
      cpn
    },

    methods: {
      cpnclick(item) {
        console.log('cpnclick', item)
      }
    }
  })
</script>

</body>
</html>