vue3 setup语法糖,常用的几个:defineProps、defineEmits、defineExpose、

vue3和vue2组件之间传参的不同

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。

<script setup> 中的代码会在每次组件实例被创建的时候执行

任何在 <script setup> 声明的顶层的绑定 (包括变量,函数声明,以及 import 导入的内容) 都能在模板中直接使用,使用双花括号:{{自定义的声明}}。

在 <script setup> 中要使用动态组件的时候,应该使用动态的 :is 来绑定,结合三元运算符。

效果展示:

一、defineProps父传子

理论知识:

父组件通过 :传参名=“传递的数据” 向子组件传递参数

子组件通过 defineProps<{接收的数据}>() 来接收数据

在 script setup 中,引入的组件会自动注册,所以可以直接使用,无需再通过components进行注册。 

 代码:

父组件:

<div class="projects">实际已维修项目</div>
<AllTable
     :widthIndex="100"
     :AllTableData="data.AllTableData"
     :tableColumns="data.tableColumns"
     :heights="data.heights"
     :option="true"
     @changeTbaleData="changeTbaleData"
></AllTable>
<div class="isNewOpenD">
    <el-button
      type="primary"
      plain
      class="mt-4"
      style="width: 100%"
      @click="handleNew"
      >
         维修项目新增
     </el-button>
</div>

 

<script setup>
const changeTbaleData = (value) => {
  data.AllTableData = value;
};
const data = reactive({
  AllTableData:[],

})
</script>

二、defineEmits子传父

在Vue 3中,可以使用 defineEmits 函数来声明子组件可以触发的事件。该函数需要在子组件中使用,并且需要在 setup 函数中调用 。

理论知识:

父组件通过@绑定子组件注册好的事件名,在父组件中进行处理子组件传过来的value

子组件通过两点:

1.defineEmits()函数用来声明子组件可以触发的事件

   语法:const 事件名 = difineEmits(['事件'])

2.在"事件"方法内部,使用注册好的事件,向父组件传参

   语法:声明的事件名('事件',传递的数据)

理论知识代码:

 

子组件:

//封装组件:AllTable.vue
<template>
  <el-table :data="props.AllTableData" :height="props.heights" style="width: 100%"
    :cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }">
    <el-table-column type="index" label="序号" :width="props.widthIndex" />
    <template v-for="(item, index) in props.tableColumns" :key="index">
      <el-table-column :prop="item.value" :label="item.name" width="" :show-overflow-tooltip="true">
      </el-table-column>
    </template>
<el-table-column label="操作" v-if="props.option">
      <template #default="scope">
        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确认" cancel-button-text="取消"
          @confirm="confirmOption(scope.$index)" @cancel="cancelOption(scope.$index)">
          <template #reference>
            <el-button link type="danger" size="small">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
const emits = defineEmits(["changeTbaleData"])
const props = defineProps({
  widthIndex: {
    type: Number,
    default: 180
  },
  AllTableData: Object,
  tableColumns: Object,
  heights: String,
  option: {
    type:Boolean,
    default:false
  },
})
const confirmOption = (index) => {
  props.AllTableData.splice(index, 1)
  emits("changeTbaleData", props.AllTableData)
}
const cancelOption = (index) => {
  ElMessage({
    message: '取消。',
    type: 'warning',
  })
}
</script>

写到这儿,在vue开发中,常用的组件之间就上面两种方式。

但,当情景不止是父<——>子 之间通讯,可以考虑inject注入、defineExpose()暴露、pinia(或vuex) 

 三、defineExpose 获取子组件的实例和内部属性

子组件将方法、变量暴露给父组件使用,父组件才可通过 ref API拿到子组件暴露的数据。

效果展示:

参考链接:defineexpose的使用

在vue2中,通常会在子组件便签上加,ref来获取子组件的实例和属性方法,在 Vue3的script-setup 模式下,所有数据只是默认 return 给 template 使用,不会暴露到组件外,所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。

如果要调用子组件的数据,需要先在子组件显示的暴露出来,才能够正确的拿到,defineExpose可以实现

1.父组件通过ref中访问子组件的方法、变量

2.子组件中,子组件的方法、变量需要通过defineExpose暴露出去

 代码:

<SelectMaterial ref="selectMaterial"></SelectMaterial>
const selectMaterial = ref();
const selectSystemMaterial = () => {
  //打开弹框
  selectMaterial.value.Open(true);
};

弹框组件:

//弹框组件封装
 <!-- >>> 打开新增弹框 -->
    <MaintainTableDialog
      v-model:modelValue="data.isOpenDialog" //备注:弹框打开与否
      :footer="data.dialogTitle != '查看' ? data.isShowFooter : true"
      :title="'维修项目新增'"
      :dialogWidth="'50%'"
    >
      <template #default>
        <el-table
          ref="multipleTableRef"
          :data="data.mytableData"  //备注:弹框表格的数据
          style="width: 100%"
          height="50vh"
          :row-key="bindRowKeys"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
          ></el-table-column>
          <el-table-column type="index" label="序号" width="70" />
          <el-table-column prop="classifyName" label="设备分类" width="170" />
          <el-table-column
            prop="no"
            label="项目编号"
            width="160"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="name"
            label="项目名称"
            width="190"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="period" label="周期" width="100" />
          <el-table-column prop="manager" label="负责人" width="100" />
        </el-table>
      </template>
      <template #footer>
        <div class="footer-btn">
          <el-button
            type="primary"
            @click="clickNewDialog"
            :loading="data.isLoading"
            class="submit"
            >确认</el-button
          >
          <el-button @click="data.isOpenDialog = false">取消</el-button>
        </div>
      </template>
    </MaintainTableDialog>
<script setup>
const Open = (isAdd) => {
  data.isOpenDialog = isAdd || true;
  data.mytableData = store.selectMaterilReqList;
};
//父组件中访问子组件的方法或者变量需要通过defineExpose暴露出去
defineExpose({
  Open,
});
</script>

写到这儿,以上就是difineExpose()的用法 。

以下是调取接口——数据回显——选中数据传参,可选看

 代码(打开弹框调取接口——数据回显):

const handleNew = () => {
  data.isOpenDialog = !data.isOpenDialog;
  const params = {
    shipGuid: data.ruleForm.shipGuid,
    category: 2,
  };
  console.log(data.AllTableData)
  api.getMaintainItems.post(params).then((res) => {
    // data.mytableData = res.data.data;
    //!!!提示:首先打开弹框把“多选”勾选的数据置空,因为在之后会赋值选中的效果
    multipleTableRef.value.clearSelection();
    let itemGuidLists=[]
    data.AllTableData.forEach(item=>{
      itemGuidLists.push(item.itemGuid)
    })
    console.log(itemGuidLists)
    data.mytableData=res.data.data.filter(item=>{
      if(itemGuidLists.indexOf(item.itemGuid)<0){
        //备注:只显示未勾选的。只显示未选择的
        return true  
      }else{
        return false
      }
    })
    // data.AllTableData.forEach((row) => {
    //   data.mytableData.map((item) => {
    //     if (row.itemGuid == item.itemGuid) {
             //备注:显示所有,并勾选计划内选中的。显示:有选中和未选择的
             //!!!提示:设为true,多选框选中
    //       multipleTableRef.value.toggleRowSelection(item, true);
    //     }
    //   });
    // });
  });
};

代码(选中传数据):

<el-button
   type="primary"
   @click="clickNewDialog"
   :loading="data.isLoading"
   class="submit"
>确认
</el-button>
<script setup>
const clickNewDialog = (val) => {
  data.isOpenDialog = false;//关闭子弹框
  const selectData = multipleTableRef.value.getSelectionRows();//获取多选,选中的项,
  //比较子弹框传的 和 父列表展示的 ,不存在添加到父列表
  const guidData = data.AllTableData.map((item) => {
    return item.itemGuid;
  });
  selectData.map((item) => {
    // [].indexof() == -1 不存在
    if (guidData.indexOf(item.itemGuid) < 0) {
      data.AllTableData.push(item);
    }
  });
};
</script>

 四、inject注入式父子组件传参

父组件可以向子组件(无论层级)注入依赖,每个子组件都可以获得这个依赖,无论层级。

参考链接:依赖注入

 

代码:

//父组件
<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'
provide('foo', 'bar')// 提供静态值
const count = ref(0)// 提供响应式的值
provide('count', count)
provide(fooSymbol, count)// 提供时将 Symbol 作为 key
provide('parentData', data.msg);// 提供默认值

const data = reactive({
    msg: "我是父组件的数据",
})
</script>
//子组件
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入不含默认值的静态值
const api = inject('parentData')
// 注入响应式的值
const count = inject('count')
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
// 注入一个值,若为空则使用提供的默认值
const bar = inject('foo', 'default value')
// 注入一个值,若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})

</script>
<template>
    <template>
    <p>我是子组件</p>
    <p>parent组件数据:{{api.parentData}}</p>
    <p>parent组件数据:{{parentData}}</p>
</template>

写到这儿,以上就是注入依赖的用法。 

实际代码,可选看

在项目里,用到最多的是:

1、封装的axios,用于发起网络请求

2、封装的echart,用于调用原生的ecahrt

 在整个项目的main.js文件,

provide():提供一个值,可以被后代组件注入。

//main.js
import * as api from './api/index'
import * as echarts from 'echarts'
import App from './App.vue'
const app = createApp(App);
//演示:
app.provide('$api', api);
app.provide('$echarts', echarts);
app.mount('#app')

inject():注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 

//任何一个vue页面组件
<script setup>
  const api = inject("$api");
  //...调取接口
  api.某某

const _echarts = inject("$echarts");
 myCharts = _echarts.init(
      myChart.value,
      {
        width:"100%",
        height:"100%",
      },
      {
        renderer: "svg",
      }
    );

    window.addEventListener("resize", function () {
      myCharts && myCharts.resize();
    });
</script>

 

 

 

 

 

 

 

 

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

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

相关文章

Spring中的循环依赖问题

目录 1、什么是Spring的循环依赖&#xff1f; 2、如何避免循环依赖问题&#xff1f; 3、Spring的三级缓存 小结 1、什么是Spring的循环依赖&#xff1f; Spring框架中的循环依赖问题是指两个或多个bean之间相互依赖&#xff0c;形成闭环&#xff0c;导致无法完成实例化的问…

儿童绘本故事:鱼小乐的海洋奇幻之旅

《鱼小乐的海洋奇幻之旅》Chapter 1: 美好的计划一个晴朗的日子&#xff0c;鱼小乐和她的同学们聚在一起&#xff0c;兴奋地计划着一场奇妙的冒险。他们决定一起前往珠海海洋王国&#xff0c;展开一场海洋奇幻之旅。On a sunny day, Fishy Joy and her classmates gathered tog…

JDBC编程基础

JDBC编程基础 JDBC介绍创建JDBC项目的步骤1.引入依赖2.注册驱动3.获取数据库连接4.获取sql执行对象 JDBC 常用 API 详解sql执行对象PreparedStatement作用 事务管理结果集对象 JDBC项目demo测试 JDBC介绍 每个数据库都会提供一组API来支持程序员实现自己客户端&#xff0c;自己…

文心一言 VS 讯飞星火 VS chatgpt (145)-- 算法导论12.1 5题

五、用go语言&#xff0c;因为在基于比较的排序模型中&#xff0c;完成n个元素的排序&#xff0c;其最坏情况下需要 Ω(nlgn) 时间。试证明:任何基于比较的算法从 n 个元素的任意序列中构造一棵二又搜索树&#xff0c;其最坏情况下需要 Ω(nlgn) 的时间。 我个人喜欢 灵小智 。…

Java 简易版王者荣耀

所有包和类 GameFrame类 package newKingOfHonor;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.ArrayList;im…

初刷leetcode题目(9)——数据结构与算法

&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️…

封装可多选的组件(Autocomplete)

一。组件库Material UI 1.1 地址 https://v4.mui.com/zh/getting-started/installation/ 1.2 简介 自称世界上最受欢迎的React UI组件库(能看到这里的基本用法应该都清楚了&#xff0c;我就不重复了) 二。效果展示 三。代码展示 import React from reactimport { useField, us…

sql中group by和having的使用

group by&#xff1a;按照某个字段或者某些字段进行分组。 having&#xff1a;对分组之后的数据进行再次过滤&#xff0c;having必须和group by一起用&#xff0c;且在group by后面。 比如person表如下&#xff08;以下查询均基于此表&#xff09;&#xff1a; 1.group by 用法…

linux 命令 sudo、su 命令

sudo命令详解 1、初识sudo sudo是linux下常用的允许普通用户使用超级用户权限的工具&#xff0c;sudo 用来执行需要提升权限&#xff08;通常是作为 root 用户&#xff09;的命令&#xff0c;允许系统管理员让普通用户执行一些或者全部的root命令&#xff0c;如halt&#xff…

002、ArkTS

之——开发语言 目录 之——开发语言 杂谈 正文 1.TypeScript基础 1.1 基础类型 1.2 条件语句 1.3 函数 1.4 类 1.5 模块 1.6 迭代器 2.ArkTS 2.1 JAVA SCRIPT 2.2 TS 2.3 ArkTS ​编辑 3.示例 3.1 概述性示例 3.2 自定义组件 3.3 渲染控制语法 3.4 状态管…

【C++】什么是模板?怎样使用模板?

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.函数模板 1.1函数模板概念 1.2函数…

研究前沿|NAR:一个综合性的植物代谢组数据库

引言 2023年10月&#xff0c;华中农业大学小麦改良创新团队陈伟教授课题组在Nucleic Acids Research发表题为“PMhub 1.0: a comprehensive plant metabolome database”的文章&#xff0c;系统介绍了他们开发的植物代谢分析网站&#xff08;PMhub&#xff09;的功能与价值。P…

Maven生命周期

Maven生命周期 通过IDEA工具的辅助&#xff0c;能很轻易看见Maven的九种生命周期命令&#xff0c;如下&#xff1a; 双击其中任何一个&#xff0c;都会执行相应的Maven构建动作&#xff0c;为啥IDEA能实现这个功能呢&#xff1f;道理很简单&#xff0c;因为IDEA封装了Maven提供…

PDF控件Spire.PDF for .NET【转换】演示:将C#/VB.NET:将 PDF 转换为 PostScript (PS)

PostScript 是 Adobe Systems 在 20 世纪 80 年代开发的一种将数字图形或文本文件转换为可供打印的固定格式的方法。随着时间的推移&#xff0c;虽然 PostScript (PS) 文件格式不再像以前那样流行&#xff0c;但现在大多数打印机仍然支持它。在本文中&#xff0c;您将了解如何使…

【刷题笔记】匹配字符串||KMP||动图解析||符合思维方式

找出字符串中第一个匹配项的下标 1 题目描述 https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/ 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开…

IP-Adapter:文本兼容图像提示适配器,用于文本到图像扩散模型

IP-Adapter这是一种有效且轻量级的适配器&#xff0c;用于实现预训练文本到图像扩散模型的图像提示功能。只有 22M 参数的 IP 适配器可以实现与微调图像提示模型相当甚至更好的性能。IP-Adapter 不仅可以推广到从同一基本模型微调的其他自定义模型&#xff0c;还可以推广到使用…

OpenVINO异步Stable Diffusion推理优化方案

文章目录 Stable Diffusion 推理优化背景技术讲解&#xff1a;异步优化方案思路&#xff1a;异步推理优化原理OpenVINO异步推理Python API同步和异步实现方式对比 oneflow分布式调度优化优势&#xff1a;实现思路 总结&#xff1a; Stable Diffusion 推理优化 背景 2022年&am…

Selenium 连接到现有的 Firefox 示例

当前环境&#xff1a; python 3.7 selenium 3.14.1 urllib3 1.26.8 Frefox 115.1.0esr(32位) geckodriver.exe 0.33.0 1 下载 Firefox 浏览器&#xff0c;根据自己的需要选择。 下载 Firefox 浏览器&#xff0c;这里有简体中文及其他 90 多种语言版本…

招标采购软件如何让采购变得更轻松?

企业总是希望让采购流程更简单&#xff0c;选择更好的供应商&#xff0c;花更少的钱。采购软件的普及使原材料和服务的采购变得更容易&#xff0c;向供应商&#xff08;甚至是全球供应商&#xff09;索取信息的流程已大大简化。包括招标采购软件在内的采购技术已成为企业运营不…

Elasticsearch(ES)概述

文章目录 一.什么是Elasticsearch?1.正向索引和倒排索引2.Mysql和ES的概念对比3.安装elasticsearch、kibana 二.IK分词器三.索引库操作四.文档操作五.RestClient操作索引库1.初始化RestClient2.创建索引库3.删除索引库4.判断索引库是否存在 六.RestClient操作文档1.新增文档2.…