vue---component2---组件传参2 之子传父-事件派发emit和自定义事件（父组件向子组件传、子组件向父组件传、非相关组件之间传参）

最新推荐文章于 2024-08-29 10:13:04 发布

咩有猫腻.

最新推荐文章于 2024-08-29 10:13:04 发布

阅读量458

点赞数

分类专栏： Vue 三-框架类

本文链接：https://blog.csdn.net/DcTbnk/article/details/107238220

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

一、自定义事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义事件</title>
  </head>
  <body>
    <!-- 自定义事件 -->
    <div id="app">
      <button @click="clickHandle">点一下</button>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // CustomEvent：原生js也可以做内置自定义事件
      // 组件的生命周期钩子函数
      // 在vue中 通过$on $emit实现自定义事件
      new Vue({
        el: "#app",
        // 组件创建成功之后执行，只执行一次
        created() {
          console.log("组件创建成功");
          // 表示监听事件
          // 第一个参数：事件名，第二个参数：事件处理函数
          // 俺理解为存储，命名之后给它存储一个对应的处理内容
          this.$on("anniubeidianjile", this.ccc);
        },
        methods: {
          clickHandle() {
            // 表示触发事件
            //  参数一 事件名字
            //  参数二 传递的参数
            // 俺理解为执行这个命名对应的处理内容
            this.$emit("anniubeidianjile", {
              a: "1",
              name: "来自桃都的一个赌徒",
            });
          },
          // 这个p就是emit中传来的参数
          ccc(p) {
            console.log("这是一个自定义事件，他被触发执行了");
            console.log(p);
          },
        },
      });
    </script>
  </body>
</html>

二、子组件向父组件传参

在这里插入图片描述

<title>组件传参-子传父</title>
  </head>
  <body>
    <!-- html -->
    <div id="app">
      <h1>点击后，当前的计数值为：{{msg}}</h1>
      <!-- 命名成countAdd不行，因为vue不区分大小写，必须写成count-add，用-将小写转换为大写 ，或者直接写成小写countadd就不需要再转换了-->
      <!-- 谁派发谁监听，countchanged派发countchanged就监听，监听在countchanged前加个@即在counter上绑定一个事件，给监听加一个处理函数getDataFromCounter-->
      <counter @count-add="getCount"></counter>
    </div>
    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
      // 子组件向父组件传参 通过事件派发
      const counter = {
        template: `<button @click="clickHandle">{{count}}</button>`,
        data() {
          return {
            count: 1,
          };
        },
        methods: {
          clickHandle() {
            // 点击事件处理函数
            this.count++;
            // 事件名称要么写成countadd，要么写成count-add也就是countAdd，但是不能写成countAdd，因为vue不区分大小写，需要转换
            this.$emit("count-add", this.count);
          },
        },
      };
      new Vue({
        el: "#app",
        components: {
          counter,
        },
        data: {
          msg: 1,
        },
        methods: {
          getCount(v) {
            this.msg = v;
          },
        },
      });
    </script>
  </body>