Vue组件间的通信——子传父

最新推荐文章于 2024-10-10 13:13:22 发布

「已注销」

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量202

点赞数 1

分类专栏： Vue框架笔记文章标签： vue vue.js visual studio

本文链接：https://blog.csdn.net/Linux_MK/article/details/105571117

版权

Vue框架笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现方法:

子组件向父组件中传递消息通过自定义事件。即子组件通过在自身的事件执行方法中使用this.$emit('自定义事件名称',需要传递的内容),这个方法,在组件使用时监听自定义事件,从而在父组件中处理自定义事件的带参数的执行方法来进行信息传递。
通信步骤:
(1)子组件自身触发事件,在这个事件执行方法中通过调用this.$emit('自定义事件名称',传递的信息内容)这个方式向父组件发送信息
(2)在Vue实例范围内使用组件时,在组件上通过v-on监听子组件中设置的自定义事件,事件的执行方法在父组件中定义,在父组件中处理自定义事件的带参数执行方法(这个参数用于接收传递过来的信息)。
通信步骤详解:
//1.创建Vue实例对象;创建子组件构造器对象,设置子组件实现功能;将组件构造器对象挂载到Vue实例对象上,构成父子组件.
//2.在子组件中设置触发信息传递的事件,通过子组件的事件执行方法调用this.$emit("自定义事件",所传内容)这个方法进行通信传递
//3.在Vue实例对象控制范围内使用子组件,同时监听子组件中设置的自定义事件,并调用父组件的执行方法;通过父组件的带参数执行方法处理子组件传递过来的信息。

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件间的通信——子传父</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!--3.在Vue实例对象控制范围内使用子组件,同时监听子组件中设置的自定义事件,并调用父组件的执行方法-->
    <cpmn v-on:cinfo="info"></cpmn>
  </div>

  <!--1.设置子组件实现功能 -->
  <template id="cpn">
    <div>
      <!-- //2.在子组件中设置触发信息传递的事件 -->
      <button v-for="item in classify" v-on:click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>
  <script>
    //1.创建子组件构造器对象
    const cpmn = Vue.extend({
      template: '#cpn',
      data() { //设置子组件的数据
        return {

          classify: [{
              id: 1,
              name: '动漫'
            },
            {
              id: 2,
              name: '数码'
            },
            {
              id: 3,
              name: '舞蹈'
            },
            {
              id: 4,
              name: '音乐'
            },
            {
              id: 5,
              name: '游戏'
            }
          ]
        }
      },
      methods: {
        //2.通过子组件的事件执行方法调用this.$emit("自定义事件",所传内容)这个方法进行通信传递
        btnClick(item) {
          // console.log(item)
          this.$emit('cinfo', item);
        }
      }
    })

    //1.创建Vue实例对象
    const vm=new Vue({
      el: '#app',
      data: {},
      methods: {
        //3.通过父组件的带参数执行方法处理子组件传递过来的信息
        info(item) {
          console.log(item.name)
        }
      },
      components: {
        //1.将组件构造器对象挂载到Vue实例对象上,构成父子组件
        cpmn,
      }

    });
  </script>
</body>

</html>