Vue - 组件通信（子传父）

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

A_bad_horse

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

阅读量129

点赞数

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

本文链接：https://blog.csdn.net/A_bad_horse/article/details/123155450

版权

Vue 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

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

<body>
<div id="app">
    <cpn @itemclick="cpnClick"></cpn>
</div>

<template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)"> {{item.name}} </button>
    </div>
</template>

<script src="../vue.js"></script>
<script>
    const cpn = {
        template: '#cpn',
        data() {
          return {
            categories: [
              {id: 1, name: '篮球'},
              {id: 2, name: '羽毛球'},
              {id: 3, name: '乒乓球'},
              {id: 4, name: '网球'},
            ]
          }
        },
        methods: {
          btnClick(item) {
            this.$emit('itemclick', item) // 向父组件发送事件名称，父组件负责监听该事件
          }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
        },
        components: {
            cpn
        },
        methods: {
          cpnClick(item) { // 默认传递item
            console.log('hi', item)
          }
        }
    })
</script>
</body>

点击按钮时，输出'hi'以及item内容

A_bad_horse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 组件通信（子传父）

子组件通过$emit()触发事件父组件通过v-on监听子组件事件<body><div id="app"> <cpn @itemclick="cpnClick"></cpn></div><template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item)"> {{item.n
复制链接

扫一扫