【Vue3】3-3 : 组件之间是如何进行互相通信的

这篇具有很好参考价值的文章主要介绍了【Vue3】3-3 : 组件之间是如何进行互相通信的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本书目录:点击进入

一、组件之间为什么要做通信

二、组件之间通信方式

2.1、父传子:由传递属性实现

stage 1:申明 (即定义)

stage 2:注册

stage 3:使用

【示例】:父组件将 title 和 count 传递给子组件 (普通数据 和 响应式数据的传递)

>  代码 

>  效果

2.2、子传父:由自定义事件实现 

stage 1:申明 (即 父组件:定义方法 + 子组件:调用方法)

stage 2:注册

stage 3:使用

 【示例】:子组件将 data 传递给父组件 

>  代码 

>  效果


一、组件之间为什么要做通信

  • 主要是为了让组件满足不同的需求

如:

  • 评分组件显示:由5颗星变成10颗星
  • 按钮组件显示:红色删除,比较危险

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信

二、组件之间通信方式

vue中有4-5种,本节介绍最常见的 

  • 父子通信

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信

2.1、父传子:由传递属性实现

stage 1:申明 (即定义)

stage 2:注册

stage 3:使用

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信

【示例】:父组件将 title 和 count 传递给子组件 (普通数据 和 响应式数据的传递

  • 普通数据:title="hello world" ,无法响应式修改数据

  • 响应式数据 :count="count"

>  代码 
<body>
  <div id="app">
    <my-head title="hello world" :count="count"></my-head>
  </div>
  <script>
    let app = Vue.createApp({
      data(){
        return {
          count: 10,
          title: "hello vue3"

        }
      },
      mounted(){
        setTimeout(()=>{
          this.title = "hello vue3";
          this.count = 20;
        }, 2000)
      }
    })

    app.component('MyHead', {
      props: {
        'count': {
          type: Number
        }
      },
      props: ['title', 'count'],
      template: `
        <header>
          <div>{{ title }},{{ count }}</div>
          <h2>logo</h2>
          <ul>
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `
    });
    
    let vm = app.mount('#app');
  
  </script>
</body>
>  效果

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信

2.2、子传父:由自定义事件实现 

stage 1:申明 (即 父组件:定义方法 + 子组件:调用方法

stage 2:注册

stage 3:使用

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信

 【示例】:子组件将 data 传递给父组件 

>  代码 
<body>
<div id="app">
    <div>{{message}}</div>
    <my-head @custom-click="handleClick"></my-head>
  </div>
  <script>
    let app = Vue.createApp({
      data(){
        return {
          message: "app Data"
        }
      },
      methods: {
        handleClick(data){
          // console.log(data);
          this.message = data;
        }
      }
    })

    app.component('MyHead', {
      emits: ['custom-click'], 
      template: `
        <header>
          <h2>logo</h2>
          <ul>
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `,
      mounted(){
        setTimeout(()=>{
          this.$emit('custom-click', 'MyHead Data')
        }, 2000)
      }
    });
    let vm = app.mount('#app');
  </script>
</body>
>  效果

【Vue3】3-3 : 组件之间是如何进行互相通信的,架构师之路-java,vue.js,前端,javascript,组件通信,父子通信文章来源地址https://www.toymoban.com/news/detail-798457.html

到了这里,关于【Vue3】3-3 : 组件之间是如何进行互相通信的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue兄弟组件之间的通信:

    思路: 通过中间人父组件进行通信; 子组件先传给父组件,然后父组件再传给另一个子组件;  结果:   注意: console.log(res.json())的结果是promise对象; 图示: 要通过res接收res.json()结果才是data数据;  结果:   子组件传给父组件的data,是一个临时变量,如果父组件想用,

    2024年02月11日
    浏览(47)
  • 浅谈Vue组件之间的通信

    父子组件通信 : 父组件向子组件传递数据 :可以通过 props 属性向子组件传递数据。 子组件向父组件传递数据 :可以通过 $emit 方法触发一个自定义事件,并在父组件中监听这个事件。 在父组件中: 兄弟组件通信 : 可以使用共同的父组件作为中介,父组件通过 props 向子组

    2024年02月22日
    浏览(41)
  • VUE 父子组件、兄弟组件 之间通信 最强详解

    目录 1. 父组件 调用 子组件 内参数/方法 1.1 通过 ref 调用/获取 子组件内参数/方法 2. 子组件 调用 父组件 内参数/方法 2.1 通过 emit 调用 父组件方法 2.2 通过 props 调用 父组件方法/参数 2.3 通过 this.$parent 调用 父组件方法/参数 3. 兄弟组件 通信 3.1 通过 bus 进行 兄弟组件 通信

    2024年02月05日
    浏览(61)
  • vue3组件之间双向绑定

    Vue3中组件的双向绑定统一使用 v-model 进行处理,并且可以和多个数据进行绑定,例如 v-model:foo、v-model:bar。 v-model 等价于 :model-value=\\\"someValue\\\" 和 @update:model-value=\\\"someValue = $event\\\" v-model:foo 等价于 :foo=\\\"someValue\\\" 和 @update:foo=\\\"someValue = $event\\\" 父子组件之间双向绑定 子组件可以结合 i

    2024年02月11日
    浏览(31)
  • Docker 容器之间的互相通信

    步骤一:创建自定义网络 首先,我们需要创建一个自定义网络,以便容器可以连接到这个网络上,从而实现互相通信。在命令行中执行以下命令: 这将创建一个名为 ddz 的自定义网络。 步骤二:运行第一个容器并连接到自定义网络 现在,我们可以运行第一个容器,并将其连

    2024年01月16日
    浏览(44)
  • vue组件之间的通信都有哪些?

    vue组件之间的通信都有哪些? 父子组件通信: Props:父组件通过props将数据传递给子组件,子组件通过props接收父组件传递的数据。 Events:子组件通过$emit触发事件,并将数据传递给父组件,父组件通过监听子组件的事件来接收数据。 兄弟组件通信: 共同的父组件作为中介:

    2024年02月06日
    浏览(49)
  • React中组件之间如何通信?

    我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是 vue 中最强大的功能之一,同样组件化是 React 的核心思想 相比 vue , React 的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息

    2024年02月04日
    浏览(56)
  • AI生成--Vue组件之间通信方式有哪些

    Vue组件之间通信方式有以下几种: 父子组件通信:父组件可以通过props传递数据给子组件,子组件通过$emit触发事件通知父组件。 兄弟组件通信:可以通过共同的父组件作为中介,兄弟组件通过 e m i t 和 emit和 e mi t 和 on触发和监听事件实现通信。 跨级组件通信:可以使用p

    2024年02月08日
    浏览(39)
  • 07-Vue技术栈之(组件之间的通信方式)

    前言: 组件之间通信的方式有很多种,比如 props 、 自定义事件 、 全局事件总线 、 消息订阅与发布 、 父链与子组件索引 、 插槽 、 Vuex 等都可以实现组件之间的通信。在这里我将介绍以下三种通信方式。 它是一种组件间通信的方式,适用于: 子组件 === 父组件 使用场景

    2024年02月07日
    浏览(94)
  • 多线程之间如何进行通信 ?

    实现多线程之间通信的方式有多种,以下是一些常见的方式: 共享变量:多个线程共享一个变量,通过互斥锁(如 synchronized )来保护对该变量的访问,确保线程之间的安全通信。 wait() 和 notify() / notifyAll() :通过 Object 类的 wait() 方法使线程等待,然后使用 notify() 或

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包