Vue理解父子组件通信演示解析

最新推荐文章于 2026-06-23 09:09:02 发布

原创最新推荐文章于 2026-06-23 09:09:02 发布 · 163 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js #html #java

随堂练习专栏收录该内容

1 篇文章

订阅专栏

Vue理解父子组件通信演示解析

前言
一、项目演示
二、结果演示

前言

用实践更好的理解Vue中父子组件之间信息的传递

一、项目演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信演示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--思路：
父传子通信：
因为父模板中的数据子模板不能直接使用，所以需要将父模版中的数据用绑定传值的形式先传到子模版的数据中，将提供给子模版使用
子传父通信
如下例:首先需要将子模版中的按钮添加监听,并在子模版中定义一个发射自定义监听的方法,然后再使用模板时监听这个自定义方法,
当按钮被点击时,被发射的自定义方法被父模板监听到,这时会执行父模板中的方法-->

<div id="app">
<!--    用:categories="categories"将父模板中的数据与子模版中绑定-->
<!--    ③监听自定义方法-->
<cpn :categories="categories" :massage="massage" @itemclick="cpnclick"></cpn>
</div>


<template id="cpn">
    <div>
    <ul>
        <li v-for="item in categories">
<!--            ①监听按钮-->
            <button @click="btnclick(item)">{{item.name}}</button>
        </li>
    </ul>
        <h2>{{categories[massage].name}}</h2>
    </div>
</template>

<script>
const cpn = {
  template: '#cpn',
  // 用props用于接收父模板中传来的数据,并限制类型,这样在子模版中就可以动态使用模版本从服务器请求的动态数据
  props: {
    categories: Array,
    massage:Intl
  },
  // 在子模板中发射 自定义监听
  methods: {
    btnclick(item){
      // ②如果按钮被触发,则将自定义方法和参数发射出去
      this.$emit("itemclick",item)
    }
  }
}

    const app = new Vue({
      el: '#app',
      data: {
        categories: [
          {id:1,name:'热门推荐'},
          {id:2,name:'家用电器'},
          {id:3,name:'手机数码'},
          {id:4,name:'电脑办公'}
        ],
        massage: 0
      },
      methods: {
        // ④如果监听到自定义方法被执行,则获取到从子模版传过来的信息
        cpnclick(item){
          this.massage=item.id-1
        }
      },
      components: {
        cpn
      }
    })
</script>
</body>
</html>