Vue组件间的通信

最新推荐文章于 2024-08-09 18:48:50 发布
最新推荐文章于 2024-08-09 18:48:50 发布
阅读量116 收藏
点赞数
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42132814/article/details/109777273
版权

Vue组件间的通信

组件间的通信总共有六种方式

  • props（父组件向子组件传值）和$emit（子组件向父组件传值）

    • 父组件向子组件传值：props

      <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <login :parent='msg'></login>     //使用v-bind进行属性的绑定
  </div>
  <script>
    login = {
      template: '<h1>子组件--{{cmsg}}--{{parent}}</h1>',
      data() {
        return {
          cmsg: '子组件中的data'
        }
      },
      props: ['parent']      //使用props进行属性的注册
    }
    const vm = new Vue({
      el: "#app",
      data: {
        msg: '父组件中的data'
      },
      components: {
        login
      }
    })
  </script>
</body>

</html>

    • 子组件向父组件传值：$emit

      <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>父组件中的data：{{dataFromSon}}</h1>
    <son @func='show'></son>     
  </div>
  <template id="box">
    <div>
      <h1>子组件</h1>
      <input type="button" value="子组件向父组件传值" @click='myClick' />
    </div>
  </template>
  <script>
    const son = {
      template: '#box',
      data() {
        return {
          name: 'tu'
        }
      },
      methods: {
        myClick() {
          this.$emit('func', this.name);   //使用$emit发送事件的同时将子组件中的数据传给父组件
        }
      }
    }
    const vm = new Vue({
      el: '#app',
      data: {
        dataFromSon: null
      },
      methods: {
        show(data) {
          console.log('调用父组件中的show方法' + data);
          this.dataFromSon = data;
        }
      },
      components: {
        son
      }
    })
  </script>
</body>

</html>

  • EventBus中央事件总线（创建一个空的Vue实例(EventBus),来作为中间站，< e m i t 发 送 事 件 / emit发送事件/ emit发送事件/on监听事件）

    （一般用于兄弟组件间的通信。）

    <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <children-one></children-one>
    <children-two></children-two>
    <children-three></children-three>
  </div>
  <template id="one">
    <div>
      <h1>one ----- {{name}}</h1>
      <button @click='send'>传递name数据给three组件</button>
    </div>
  </template>
  <template id="two">
    <div>
      <h1>two -------{{age}}</h1>
      <button @click='send'>传递age数据给three组件</button>
    </div>
  </template>
  <template id="three">
    <div>
      <h1>three -------{{name}}---{{age}}</h1>
    </div>
  </template>
  <script>
    // 创建一个空的Vue实例(EventBus),来作为中间站
    const EventBus = new Vue();
    const childrenOne = {
      template: '#one',
      data() {
        return {
          name: 'tu'
        }
      },
      methods: {
        send() {
          // 使用EventBus.$emit来发送事件 
          EventBus.$emit('data-one', this.name);
        }
      }
    }
    const childrenTwo = {
      template: '#two',
      data() {
        return {
          age: 18
        }
      },
      methods: {
        send() {
          EventBus.$emit('data-two', this.age);
        }
      }
    }
    const childrenThree = {
      template: '#three',
      data() {
        return {
          name: '',
          age: ''
        }
      },
      methods: {},
      mounted() {
        // 使用EventBus.on来监听事件(在钩子mounted中监听)
        EventBus.$on('data-one', name => {
          // console.log(this);
          this.name = name;
        });
        //这里使用箭头函数的意义在于需要将this指向的c组件，如果不使用箭头函数则this指向的是EventBus实例
        EventBus.$on('data-two', age => {
          // console.log(this);
          this.age = age;
        })
      }
    }
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        childrenOne,
        childrenTwo,
        childrenThree
      }
    })
  </script>
</body>

</html>

​ 传值前：

​ 在这里插入图片描述

​ 点击按钮进行传值：

​ 在这里插入图片描述

​

  • Vuex实现组件通信（可以实现父子，兄弟组件间的通信）

    • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。

    • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyObb1xi-1605688900128)(D:\md\images\Vuex.png)]

  • ref与$parent / $children实现组件传值 （适用 父子组件通信）

    <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 在子组件中使用ref进行标记 -->
    <son ref='comA'></son>
    <son2 ref='comB'></son2>
  </div>
  <template id="box">
    <div>
      <h1>{{msg}}</h1>
      <p>{{flag}}</p>
    </div>
  </template>

  <template id="box2">
    <div>
      <h1>{{msg2}}</h1>
      <p>{{flag2}}</p>
    </div>
  </template>
  <script>
    const son = {
      template: '#box',
      data() {
        return {
          msg: '子组件1',
          flag: true
        }
      },
      methods: {}
    }
    const son2 = {
      template: '#box2',
      data() {
        return {
          msg2: '子组件2',
          flag2: false
        }
      },
      methods: {},
      mounted() {
        // 用$parent获取父组件
        console.log(this.$parent);
      }
    }
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        son,
        son2
      },
      mounted() {
        // this.$children获取子组件
        console.log(this.$children[0].msg);
        console.log(this.$children[0].flag);
        console.log(this.$children[1].msg2);
        console.log(this.$children[1].flag2);

        console.log('------------------------');
        // 也可以使用this.$refs获取子组件，但是必须要使用ref进行组件标记
        console.log(this.$refs);
        console.log(this.$refs.comA);
        console.log(this.$refs.comB);
        // 获取数据
        console.log(this.$refs.comA.msg);
        console.log(this.$refs.comA.flag);
        console.log(this.$refs.comB.msg2);
        console.log(this.$refs.comB.flag2);
      }
    })
  </script>
</body>

</html>

​ 在这里插入图片描述

  • $attrs / $listeners进行组件传值（适用于父子组件传值）

    <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src='../vue包/vue.js'></script>
</head>

<body>
  <div id="app">
    <son :foo='foo' :boo='boo' :coo='coo'></son>
  </div>
  <template id="box">
    <div>
      <h1>message</h1>
    </div>
  </template>
  <script>
    const son = {
      template: '#box',
      data() {
        return {}
      },
      methods: {},
      inheritAttrs: false,
      created() {
        console.log(this.$attrs); //{foo: "tu", boo: "qiang", coo: "min"}
      }
    }
    const vm = new Vue({
      el: '#app',
      data: {
        foo: 'tu',
        coo: 'min',
        boo: 'qiang'
      },
      methods: {},
      components: {
        son
      }
    })
  </script>
</body>

</html>

​ 在这里插入图片描述

  • provide和inject进行组件传值（使用与祖先组件先子孙组件传值）

    <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <son></son>
  </div>
  <template id="box">
    <div>
      <h1>{{message}}</h1>
    </div>
  </template>
  <script>
    const son = {
      template: '#box',
      data() {
        return {}
      },
      methods: {},
      inject: ['message'],
      mounted() {
        console.log(this.message);
      }
    };
    const vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: {
        son
      },
      provide: {
        'message': 'hello'
      }
    });
  </script>
</body>

</html>

     data() {
    return {}
  },
  methods: {},
  inject: ['message'],
  mounted() {
    console.log(this.message);
  }
};
const vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  components: {
    son
  },
  provide: {
    'message': 'hello'
  }
});
    ```
TuMinQiang
关注
专栏目录
vue组件嵌入iframe与其他系统页面跨域通信
weixin_42520314的博客
07-16 8054
今天在项目中用到在组件中嵌入iframe调用另一个vue项目中的组件页面 <template> <div style="width:100%;height:100%"> <iframe class="el_sence_table" ref="senTable" frameborder="0" height...
HTML初学入门基础1----------各种标签
涟涟的博客
12-08 720
一、使用工具 1.谷歌浏览器（其他浏览器也可） 2.取色器（Instant Eyedropper） 3.VSCode 二、新建项目 Ctrl+S保存 保存类型选为HTML类型 在开始页面打出英文! 按回车键 接下来我们就在body标签内写代码了 写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果 注： ...
Vue3组件通信
最新发布
umin_的博客
08-09 1264
在 Vue 中，组件之间的通信是实现复杂功能的关键。常见的方式包括： Props 和自定义事件：用于在父子组件之间传递数据，实现简单的双向通信。 Mitt：轻量级事件总线，适合跨组件的双向通信，超越了父子关系的限制。 v-model：简化双向数据绑定，使父子组件的数据同步更为便捷。 $attrs 和 $refs：提供灵活的通信方式，允许访问组件实例和传递属性。 Provide 和 Inject：用于祖先组件与后代组件间的数据共享，适合全局状态管理。 Pinia：Vue 的状态管理库，集中化管理全
vue---iframe的postMessage跨域通信
最爱松露巧克力
09-16 1776
前端爬坑日记之vue内嵌iframe并跨域通信 下面将3天的爬坑最终以问答的方式总结如下： 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ 1、Vue组件中如何引入iframe？ <template> <div class="act-form"> <iframe :src="src"><
css3 box-shadow
weixin_33841722的博客
05-29 119
一、box-shadow介绍 box-shadow属性向box添加一个或多个阴影。 语法： box-shadow: offset-x offset-y blur spread color inset; box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]; 单词解释：blur:模糊 spread:伸展 inset:内凹...
vue内嵌iframe跨域通信
boundle_ss的博客
12-01 6590
​ 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ ​
vue组件间通信六种方式（总结篇）
10-17
Vue.js 的组件化设计是其强大之处，但同时也带来了组件间通信的挑战。由于每个组件都有自己的作用域，因此需要特定的方法来实现数据共享。本篇文章将详细介绍 Vue 组件间通信的六种主要方式，并通过实例解析它们的...
vue组件间通信解析
08-31
本篇文章将深入解析Vue组件间通信的几种常见方式，包括属性传递（Props）、事件传递（Event Bus）以及自定义事件（$emit/$on）。 1. **属性传递（Props）**： - **父传子通信**：在Vue中，父组件可以通过`props`...
Vue组件间通信-Vuex
10-16
Vue组件间通信在实际开发过程中非常重要，对于构建大型应用尤其如此。组件之间可以通过不同的方法进行通信，包括props、events、v-model、ref、$parent、$children等，而Vuex是Vue.js应用中管理状态的一个状态管理...
vue内嵌iframe并跨域通信
热门推荐
weixin_44242600的博客
04-12 1万+
1、Vue引入iframe： 直接通过添加iframe标签，src属性绑定data中的src。 <template> <div class="act-form"> <iframe :src="src"></iframe> </div> </template> <script> export defa...
iframe跨域问题
03-07
iframe跨域问题：Uncaught DOMException Blocked a frame with origin解决方法
vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）
nullsheep的博客
02-27 1145
vue html 跨域
JavaScript 获取 HTML 元素的骚操作
abraham_ly的博客
11-11 163
JavaScript 获取 HTML 元素的骚操作 1、 HTML DOM ​ 文档对象模型 (Document Object Model)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 HTML DOM 是关于如何虎丘、修改、添加、删除 HTML 元素的标准。我么用 JavaScript 对网页进行的所有操作都是通过DOM进行的。 2、Document 对象 ​ 每个载入浏览器的 HTML文档都会成为 Document 对象。 ​ Document 对象使我们可以从脚本中对
Vue进阶（八十六）：iframe 结合 window.postMessage 实现跨域通信
IT全栈 华强工作室
11-27 6562
什么是iframe？iframe元素会创建包含另外一个文档的内联框架（即行内框架）。什么是？方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数设置为相同值) 时，这两个脚本才能相互通信。方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
Vue和iframe跨域调用
qq_15038747的博客
07-11 4914
Test.js 在iframe内的html页面引入 // 在iframe子页面引入该js window.addEventListener ('message', function(event) { /** * 可以在这个地方调用HTML */ console.log('调用HTML') if (event&&event.data){ console.log(event.data) console.log('.
vue 实现iframe跨域通信
sunlizhen的专栏
11-11 1883
父页面: <template> <div class="appStore"> <div> <el-row :gutter="20"> <el-col :span="6" style="text-align: center;" v-for="(item, index) in dataList"> <div class="grid-content bg-purple"> .
box-shadow的多种用法
joys_wkx的博客
12-25 3638
box-shadow属性的秒用 由于参数的不同而导致显示结果也不同 只有三个参数时 #box { width: 100px; height: 100px; background: green; position: absolute; top: calc(50% - 50px)...
【vue3】iframe的使用，实现跨域交互，互访内容和方法
weixin_45274678的博客
07-03 1297
父页面引用子页面iframe
Vue组件间通信详解与实践
总结来说，Vue组件间的通信主要通过props和事件来实现，而父子组件间的通信更为直接，而兄弟组件通信则需要额外的设计和协调。熟练掌握这些通信方式是构建可维护、可扩展的Vue应用的关键。建议参考以下链接进一步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值