vue中父子组件的相互通信（代码演示和讲解）

最新推荐文章于 2022-11-04 23:30:51 发布

webchang

最新推荐文章于 2022-11-04 23:30:51 发布

阅读量616

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/weixin_43974265/article/details/112632738

vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了Vue中父子组件的通信方法，包括父传子使用props及子传父利用$emit触发事件。强调了不应直接在子组件中修改props数据，建议使用data或计算属性。提供代码演示帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 父子组件的通信

子组件是不能引用父组件或者Vue根实例的数据的。

但是，在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？

父传子：通过 props 向子组件传递数据
子传父：通过 $emit 向父组件发送事件

2. 父传子

2.1 使用 props

在子组件中，使用 props 来声明需要从父组件接收到的数据。在父组件使用子组件的地方，用 v-bind 方式把数据传递子组件。

props 的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

借用 coderwhy 老师的图来详细展示一下 props 的具体用法：

在这里插入图片描述

2.2 代码演示

大家可以直接复制代码到自己电脑上进行测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>6</title>
</head>
<body>

<div id="app">
  <cpn1></cpn1>
</div>

<template id="cpn1">
  <div>
    <h2>{{title}}</h2>
    <h2>我是父组件的内容</h2>
    <h2>-----------------</h2>
    <!-- 父组件传递数据给子组件 -->
    <!-- 使用v-bind语法才会将后边的 title 当做变量去父组件的data中寻找，
    如果没有使用 v-bind，title 就会当做字符串传递给 ctitle -->
    <cpn2 :ctitle="title" :cmovies="movies"></cpn2>
  </div>
</template>

<template id="cpn2">
  <div>
    <h2>{{ctitle}}</h2>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  // cpn1 是父组件，父组件中有 title 和 movies 数据
  // cpn2 是子组件，在子组件中定义 props ，
  // props中声明两个属性：ctitle 和 cmovies ，用来接收父组件传递的数据并使用

  Vue.component('cpn1', {
    template: '#cpn1',
    data() {
      return {
        title: '我是标题',
        movies: ['电影1', '电影2', '电影3']
      }
    },
    components: {
      cpn2: {
        template: '#cpn2',
        // props: ['ctitle', 'cmovies']
        props: {
          // ctitle:String,//对数据做一些类型限制
          // cmovies:Array
          ctitle: {
            type: String, //进行类型限制
            default: '我是默认值',//当父组件没有给子组件传递数据时，就会使用默认值
          },
          cmovies: {
            type: Array,
            //类型是对象和数组时，默认值必须是一个函数
            default(){
              return []
            }
          }
        }
      }
    }
  })

  let vm = new Vue({
    el: "#app",
    data: {}
  });
</script>

</body>
</html>

结果如图所示：
在这里插入图片描述

3. 子传父

3.1 使用 $emit

当子组件需要向父组件传递数据时，就要用到自定义事件了。

自定义事件的流程：

在子组件中，通过 $emit() 来触发事件。
在父组件中，通过 v-on 来监听子组件事件。v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

3.2 代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>8</title>
</head>
<body>

<!--父组件模板-->
<div id="app">
 <!--  此处不是浏览器产生的事件对象，是我们自定义的事件。当不加括号时，会默认传递子组件通过 $emit 发射事件时添加的数据-->
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <!-- 在子组件中的按钮，同时监听点击事件 -->
    <button v-for="item in categories" @click="btnClick(item.id)">{{item.name}}</button>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let cpn = {
    template: '#cpn',
    data(){
      return {
        categories:[
          {id:'1',name:'手机'},
          {id:'2',name:'电脑'},
          {id:'3',name:'书籍'},
          {id:'4',name:'家电'},
        ],
        data:'data',
        str:'str'
      }
    },
    methods:{
      btnClick(id){
        //子组件向父组件传递事件，第一个参数是自定义事件名，后边的参数是数据
        this.$emit('item-click',id,'hello')
      }
    }
  }
  let vm = new Vue({
    el: "#app",
    data: {},
    components: {
      cpn
    },
    methods:{
      cpnClick(id,str){
        console.log(id,str);
      }
    }

  });
</script>

</body>
</html>

在这里插入图片描述

4. 注意事项

避免通过子组件直接修改 props 中的数据，会报错。

原因：子组件的 props 中的数据来源是父组件，也就是当父组件中的相关数据改变的时候，子组件props中的数据也会跟着变。如果此时我们在子组件中也对props中的数据进行修改，就相当于一个数据可以在两个地方被修改，这是不好的。

<div id="app">
  <cpn :number="num"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>子组件props中的:{{number}}</h2>
    <!-- 我们通过 v-model 来尝试修改在子组件的 props 中声明的 number   -->
    <input type="text" v-model="number">
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  let cpn = {
    template: '#cpn',
    props: {
      number: Number,
    }
  }

  let vm = new Vue({
    el: "#app",
    data: {
      num: 1,
    },
    components: {
      cpn
    }
  });
</script>

在这里插入图片描述
上边的代码会报错。报错信息提示要避免直接修改 props 中的数据，但是可以通过 data 或者 计算属性的方式来代替实现相同的效果。

我们对上边的代码稍作修改，在子组件中加一个 data，同时 v-model 改为绑定 data 中的数据

<div id="app">
  <cpn :number="num"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>子组件props中的:{{number}}</h2>
    <!-- 我们通过 v-model 绑定到 data 中 dataNumber  -->
    <input type="text" v-model="dataNumber">
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  let cpn = {
    template: '#cpn',
    //加一个 data，数据来源是 props 中的数据
    data(){
      return {
        dataNumber:this.number
      }
    },
    props: {
      number: Number,
    }
  }

  let vm = new Vue({
    el: "#app",
    data: {
      num: 1,
    },
    components: {
      cpn
    }
  });
</script>