【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 组件之间通信的方式

    1.父向子版  父组件设置自定义属性 子组件props接收 2.子向父版 父组件设置自定义方法并绑定接收的方法 子组件触发方法  3.全局事件总线   4.Vuex 用这个的话首先要装包或者创建工程的时候选择这个选项手脚架会给你装好 5.路由 抽象一点说路由也算通信方式的一种吧 这种

    2024年01月18日
    浏览(38)
  • Vue兄弟组件之间的通信:

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

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

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

    2024年02月05日
    浏览(56)
  • 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日
    浏览(30)
  • Docker 容器之间的互相通信

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

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

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

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

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

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

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

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

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

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

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

    2024年02月09日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包