VUE3 十种组件通信的方式(附详细代码)

  1. props

    1. 用途:可以实现父子组件、子父组件、甚至兄弟组件通信

    2. 父组件

      <template>
          <div>
              <Son :money="money"></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref } from 'vue';
      let money = ref(1000)
      </script>
      
      <style scoped></style>
    3. 子组件

      <template>
          <div>
              {{ props.money }}
          </div>
      </template>
      
      <script setup lang="ts">
      /*	两种方式都可以使用		*/
      // defineProps({
      //     money: {
      //         type: Number,
      //         default: 666
      //     }
      // })
      let props = defineProps(['money'])
      </script>
      
      <style scoped></style>
  2. 自定义事件

    1. 用途:可以实现子父组件通信

    2. 父组件

      <template>
          <div>
              <Son  @zdy = 'handle'></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref } from 'vue';
      const handle = (a:any,b:any)=>{
          console.log(a,b) //
      }
      </script>
      
      <style scoped></style>
    3. 子组件

      <template>
          <div>
              <Son  @zdy = 'handle'></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref } from 'vue';
      const handle = (a:any,b:any)=>{
          console.log(a,b) //
      }
      </script>
      
      <style scoped></style>
  3. 全局事件总线$bus:

    1. 用途:可以实现任意组件通信

    2. 安装 

      pnpm i mitt
    3. 配置

      1. 新建bus.js文件

        import mitt from 'mitt'
        const $bus = mitt()
        export default $bus
    4. 使用

      1. 父组件

        <template>
            <div>
                <Son  @zdy = 'handle'></Son>
            </div>
        </template>
        
        <script setup lang="ts">
        import Son from './son.vue'
        import { ref } from 'vue';
        import $bus from '../utils/bus.js'
        $bus.on('dataToParent',(a:any)=>{
            console.log(a)
        })
        </script>
        
        <style scoped></style>
      2. 子组件

        <template>
            <div>
                <button @click="dataToParent">点击向父组件发送全局事件总线数据</button>
            </div>
        </template>
        
        <script setup lang="ts">
        import $bus from '../utils/bus.js'
        const dataToParent = ()=>{
            $bus.emit('dataToParent','hello')
        }
        </script>
        
        <style scoped></style>
  4. v-model

    1. 父组件

      <template>
          <div>
              <Son :money="money"></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref } from 'vue';
      let money = ref(1000)
      </script>
      
      <style scoped></style>
    2. 子组件

      <template>
          <div>
              {{ money }}
          </div>
      </template>
      
      <script setup lang="ts">
      defineProps(['money'])
      </script>
      
      <style scoped></style>
  5. useAttrs

    1. 父组件

      <template>
          <div>
              <Son :money="money" title="attr传参" size='default' type="primary"></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref } from 'vue';
      let money = ref(1000)
      </script>
      
      <style scoped></style>
    2. 子组件

      <template>
          <div>
              {{ $attrs.money }} --{{ $attrs.title }}
          </div>
      </template>
      
      <script setup lang="ts">
      import { useAttrs } from 'vue';
      let $attrs = useAttrs()
      console.log($attrs)
      </script>
      
      <style scoped></style>
  6. provide与inject

    1. 父组件

      <template>
          <div>
              <Son :money="money"></Son>
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import { ref,provide } from 'vue';
      let money = ref(1000)
      provide('name','wang')
      </script>
      
      <style scoped></style>
    2. 子组件

      <template>
          <div>
             
          </div>
      </template>
      
      <script setup lang="ts">
      import { inject } from 'vue';
      let name = inject('name')
      console.log(name)
      </script>
      
      <style scoped></style>
  7. ref与$parent

    1. 父组件

      <template>
          <div>
              <div>当前父组件的money是{{ money }}</div>
              <button @click="take100FromSon">从儿子手里拿100元</button>
              <Son :money="money" ref="son"></Son>
              <Dau></Dau>
      
          </div>
      </template>
      
      <script setup lang="ts">
      import Son from './son.vue'
      import Dau from './daughtor.vue'
      import { ref } from 'vue';
      let son = ref()
      let money = ref(1000)
      const take100FromSon = ()=>
      {
          son.value.money -=100;
          money.value+=100
      }
      defineExpose({
          money
      })
      </script>
      
      <style scoped></style>
    2. 儿子组件1

      <template>
          <div>
             儿子的手里有{{ money }}
          </div>
      </template>
      
      <script setup lang="ts">
      import { ref } from 'vue';
      let money = ref(500)
      defineExpose({
          money
      })
      </script>
      
      <style scoped></style>
    3. 儿子组件2

      <template>
          <div>
      女儿的手里有{{ money }}元
      <button @click="take1000FromFather($parent)">从父亲手里拿1000元</button>
          </div>
      </template>
      
      <script setup lang="ts">
      import { ref } from 'vue';
      let money = ref(5000)
      const take1000FromFather = ($parent:any)=>{
          $parent.money-=1000
          money.value+=1000
      }
      </script>
      
      <style scoped>
      
      </style>
  8. pinia

    1. 安装pinia 

      pnpm i pinia
    2. 初始化pinia

      1. 创建一个store文件夹,在下面新建一个index.js文件

        import {createPinia} from 'pinia'
        let store = createPinia()
        export default store 
      2. 在main.js文件中声明

        import store from './pinia'
        app.use(store)
    3. 使用pinia

      1. 在store下新建一个modules文件夹,用来管理pinia文件,例如,创建了一个test.js文件。

        import {defineStore} from 'pinia'
        import {ref} from 'vue'
        export const testPinia = defineStore('testPinia',()=>{
            const a = ref('hello')
            const sendMessage = ()=>{
                a.value = 'hello,vue'
                console.log(a.value)
            }
            return{a,sendMessage}
        })
      2. 组件中使用

        <template>
            <div>
        
            </div>
        </template>
        
        <script setup lang="ts">
        import {testPinia} from '../pinia/modules/test.js'
        const testpinia = testPinia()
        console.log(testpinia.a)
        testpinia.sendMessage()
        </script>
        
        <style scoped>
        
        </style>
  9. slot

    1. 默认插槽

      1. 父组件

        <template>
        <Son>
          <h1>我是默认插槽填充的结构</h1>
        </Son>
        
        **具名插槽:**
        </template>
        
        <script setup lang="ts">
        import Son from './son.vue'
        </script>
        
        <style scoped>
        
        </style>
      2. 子组件

        <template>
            <div>
              <slot></slot>
            </div>
          </template>
          <script setup lang="ts">
          </script>
          <style scoped>
          </style>
      3. 效果图

    2. 具名插槽

      1. 父组件

        <template>
          <h1>slot</h1>
            <Son>
              <template v-slot:a> 
                <!-- //可以用#a替换  -->
                <div>填入组件A部分的结构</div>
              </template>
              <template v-slot:b>
                <!-- //可以用#b替换 -->
                <div>填入组件B部分的结构</div>
              </template>
            </Son>
        </template>
        
        <script setup lang="ts">
        import Son from './son.vue'
        </script>
        
        <style scoped>
        
        </style>
      2. 子组件

        <template>
            <div>
              <h1>todo</h1>
              <slot name="a"></slot>
              <slot name="b"></slot>
            </div>
          </template>
          <script setup lang="ts">
          </script>
          
          <style scoped>
          </style>
      3. 效果图

    3. 作用域插槽

      1. 概念:可以理解为,子组件数据由父组件提供,但是子组件内部决定不了自身结构与外观(样式)

      2. 父组件

        <template>
          <div>
            <h1>slot</h1>
            <Son :todos="todos">
              <template #="{$row,$index}">
                 <!--父组件决定子组件的结构与外观-->
                 <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
              </template>
            </Son>
          </div>
        </template>
        
        <script setup lang="ts">
        import Son from "./son.vue";
        import { ref } from "vue";
        //父组件内部数据
        let todos = ref([
          { id: 1, title: "吃饭", done: true },
          { id: 2, title: "睡觉", done: false },
          { id: 3, title: "打豆豆", done: true },
        ]);
        </script>
        <style scoped>
        </style>
      3. 子组件

        <template>
          <div>
            <h1>todo</h1>
            <ul>
             <!--组件内部遍历数组-->
              <li v-for="(item,index) in todos" :key="item.id">
                 <!--作用域插槽将数据回传给父组件-->
                 <slot :$row="item" :$index="index"></slot>
              </li>
            </ul>
          </div>
        </template>
        <script setup lang="ts">
        defineProps(['todos']);//接受父组件传递过来的数据
        </script>
        <style scoped>
        </style>
      4. 效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/468988.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业公关新闻稿怎么写?媒介盒子揭秘

企业公关稿的目的在于宣传企业&#xff0c;化解企业负面舆论&#xff0c;想要写好新闻稿需要企业有专业的素养&#xff0c;深厚的笔力才能将新闻稿写得让读者愿意看&#xff0c;又能塑造企业正面形象&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;企业公关新闻稿怎么写。…

全氟己酮灭火片是什么?盘点自动灭火片的优缺点

全氟己酮灭火片是什么&#xff1f;全氟己酮灭火片是一种新型灭火材料&#xff0c;通过特殊的纳米微胶囊压缩技术&#xff0c;将环保高效的全氟己酮灭火剂压缩存储成薄片状&#xff0c;一旦温度达到一定阙值或发生明火&#xff0c;内部的全氟己酮灭火剂就会突破薄膜材料喷射出来…

防火墙的原理和配置

“防火墙”一词起源于建筑领域&#xff0c;用来隔离火灾&#xff0c;阻止火势从一个区域蔓延到另一个区域。引入到通信领域&#xff0c;防火墙这一具体设备通常用于两个网络之间有针对性的、逻辑意义上的隔离。这种隔离是选择性的&#xff0c;隔离“火”的蔓延&#xff0c;而又…

智慧物业是什么?房地产智慧物业大屏怎么做?

随着科技的飞速发展&#xff0c;智能化、信息化已经成为社会进步的显著标志。在这一背景下&#xff0c;智慧物业应运而生&#xff0c;成为现代社区管理的重要工具。它不仅提升了物业管理的效率&#xff0c;也为居民提供了更加便捷、安全的生活环境。 一、智慧物业是什么 智慧…

Vue+SpringBoot打造用户画像活动推荐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 兴趣标签模块2.3 活动档案模块2.4 活动报名模块2.5 活动留言模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 数据流程设计3.4 E-R图设计 四、系统展示五、核心代码5.1 查询兴趣标签5.2 查询活动推荐…

C++中虚表是什么

定义 虚函数&#xff08;Virtual Function&#xff09; 定义&#xff1a;类中使用virtual 关键字修饰的函数 叫做虚函数 语法&#xff1a; class Base { public:virtual void show() { cout << "Base show" << endl; } }; 虚函数表&#xff08;Virtual…

软考 网工 每日学习打卡 2024/3/18

学习内容 第8章 网络安全 本章主要讲解网络安全方面的基础知识和应用技术。针对考试应该掌握诸如数据加密、报文认 证、数字签名等基本理论&#xff0c;在此基础上深入理解网络安全协议的工作原理&#xff0c;并能够针对具体的 网络系统设计和实现简单的安全解决方案。 本章共有…

SpringBoot项目前端Vue访问后端(图片静态资源) 配置

静态资源配置 Configuration public class WebMvcConfig extends WebMvcConfigurationSupport {Value("${file.save-path}")private String fileSavePath;Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {//映射本地文件夹registry…

NineData推出SQL开发专业版:10数据源永久免费,助力企业数据库研发提效!

在数据库开发领域&#xff0c;选择合适的工具和服务至关重要。而NineData作为新一代的云原生智能数据管理平台&#xff0c;提供了数据复制、SQL 开发、数据备份以及数据对比等多种功能&#xff0c;帮助用户轻松实现混合云、多云数据源的统一管理。采用SaaS模式&#xff0c;无需…

QML入门

First Step with QML 每个QML文件都包含两部分&#xff1a;一个import部分和一个对象声明部分。对用户界面来说&#xff0c;最常用的类型和函数都定义在QtQuick 这个模块里。 编写HelloWorld 先从编程世界起点HelloWorld开始&#xff0c;这里&#xff0c;我们先不建立Qt Pro…

linux单机部署hadoop

1.下载安装包 https://archive.apache.org/dist/hadoop/common/ 2.上传压缩 3.修改配置文件 1)设置JDK的路径 cd /usr/local/software/hadoop-3.1.3/etc/hadoop vi hadoop-env.sh export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.402.b06-1.el7_9.x86_64/ 查看…

Zynq ultrascale+ 中断方式整理

摘要&#xff1a;目前一共整理三种中断&#xff0c;主要整理三种中断&#xff08;AXI_GPIO、EMIO、PL-PS_irq&#xff09;在PL和PS侧的使用 一、AXI_GPIO 这个IP可以用作单bit的输入和输出&#xff1b;也可以单独作为中断或者复位等使用&#xff1b; 使用AXI GPIO IP&#xff…

CSS案例-3.背景练习

效果1 用背景加入图标 效果2 将图片设为页面背景,图片主体在中间 效果3 鼠标放到导航栏上会变颜色 知识点 CSS背景 属性 描述 取值 background 复合属性 看独立属性 background-color 背景颜色 <color> background-image 背景图像 none | url background-repeat 背景…

分享几个适合大学生的副业兼职,大家可以根据自己的情况选择

有很多大学生想找一份兼职&#xff0c;既能打发时间&#xff0c;还能赚一些零花钱。一方面提升自己的生活质量&#xff0c;另一方面为家里减轻一些负担。同时也可以通过兼职来锻炼自己的能力&#xff0c;增加社会经验。今天跟大家分享几个适合大学生的副业兼职&#xff0c;大家…

fastjson反序列化-1.2.24漏洞利用与分析

0x01 利用条件 通过对fastjson基础知识的学习和反序列化流程的分析&#xff0c;发现它与我们之前学的常规的反序列化又不太一样。fastjson自己定义了一套反序列化规则&#xff0c;它不需要反序列化的类去继承Serializable接口&#xff0c;也不需要找readObject函数作为入口。相…

视觉SLAM理论到实践系列:补充——泊松公式证明

视觉SLAM理论到实践系列文章 下面是《视觉SLAM十四讲》学习笔记的系列记录的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 视觉SLAM理论到实践系列文章链接 下面是专栏地址&#xff1a; 视觉SLAM理论到实践专栏 文章目录 视觉SLAM理论到实践系列文章视觉SLAM理论…

png格式怎么转成gif?一个小窍门快速转换

如何将png转换成gif动画&#xff1f;作为新媒体工作者&#xff0c;在日常办公中少不了使用到gif格式图片。那么&#xff0c;当我们遇到需要将png格式转换成gif格式的时候要怎么操作呢&#xff1f;很简单&#xff0c;使用gif动画图片&#xff08;https://www.gif.cn/&#xff09…

android studio的布局没有提示之SDK不匹配

我新建了一个项目&#xff0c;然后突然发现布局没有提示了&#xff1a; 我看了下我的build.gradle 我直接修改compileSdkVersion为30就能正常使用了

在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理&#xff0c;模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色&#xff08;RGB值为0, 0, 0&#xff09;&a…

linux 基础总结

1、简述Raid0、raid1、aid5、Raid10的区别 RAID:redundant array of independent disks, 独立冗余磁盘阵列 磁盘阵列是由很多块独立的磁盘&#xff0c;组合成一个容量巨大的磁盘组&#xff0c;利用个别磁盘提供数据所产生加成效 果提升整个磁盘系统效能。利用这项技术&#x…