Vue3中setup方法的用法详解

2024-08-19 15:45:52

1.参数props

props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象。

也就是说，如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}。如果你未通过Props进行接受配置，则输出的值是undefined

<template>
  <div class="box">
    父组件
  </div>
  <no-cont :mytitle="msg"
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script lang="ts">
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:'父组件给子给子组件的数据'
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

为什么通过props.mytitle输出的值是undefined呢？

因为我们没有使用props进行接收配置。即

props:{
    mytitle:{
        type:Object
    }
}

2.参数context

第2个参数：context，是一个对象。里面有attrs(获取当前标签上的所有属性的对象)。但是该属性是props中没有声明接收的所有的对象。如果你使用props去获取值，同时props中你声明了你要获取的值，则：获取的值是undefined

注意点：

attrs获取值是不需要props中没有声明接收。第1个参数props获取值是需要props中声明接收的。有emit事件分发(传递给父组件需要使用该事件)

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //输出{title:父组件传递的值}
    console.log('props==>',props.mytitle);

    // 输出别人的标题【使用context获取值，不需要使用props去接受】
    console.log('context==> ',context.attrs.othertitle);

    // 输出undefined，因为context不需要使用props去接受。
    console.log('contextmytitle==> ',context.attrs.mytitle);
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

3. 子组件向父组件派发事件

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

4.优化事件派发

我们知道第2个参数context是一个对象，并且对象中有三个属性attrs,slots,emit，在事件派发的时候，直接使用emit就ok了

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

5.获取父组件传递的值

我们将使用props参数获取值，以及使用attrs获取值

<template>
<hr/>
   <h2>子组件</h2>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
    <h2>使用了props声明接收==>{{ mytitle  }}</h2>
    <h2>使用参数attrs获取==>{{ attrs.othertitle  }}</h2>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    return {sonHander,attrs}
  }
});
</script>

附使用setup函数时需要注意几点：

setup函数的执行时机是在beforeCreate和created之间

由于setup执行时机是在created之间，所以组件才刚刚被创建，而data和methods还没初始化好，所以无法在setup中使用data和methods

setup中this指向undefined

setup只能是同步的，不能是异步的

到此这篇关于Vue3中setup方法的用法详解的文章就介绍到这了,更多相关Vue3 setup方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue3+vite使用jsx和tsx详情

目录安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战第一种写法使用this 第二种写法第三种写法安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def
详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞中使用)

在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template>  <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com
vue3.0实践之写tsx语法实例

目录测试tsx 新建一个App.tsx页面 tsx使用v-model指令 (App.tsx组件) 使用v-show.与三目运算符 tsx之数组的遍历(map) 自定义属性 data-index tsx绑定事件 tsx之 props父组件向子组件传递参数 App.vue 父 App.tsx 子 tsx之子组件向父组件传递数据子组件 App.tsx App.vue 父总结 00:下载 yarn add @vitejs/plugin-vue-jsx -D 01:引入 vite.config.
vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

目录在setup()钩子函数中调用在<srcipt setup>中调用在setup()钩子函数中调用父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

目录前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题总结前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做
如何在vue3中同时使用tsx与setup语法糖

目录前言 Tsx与setup语法糖的优势遇到的问题最后前言想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持
Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法

目录环境问题描述问题解决补充:Vue3 getCurrentInstance与ts结合使用的坑一.关于在ts中使用到类型定义错误问题二.不能使用getCurrentInstance的ctx 总结环境 vscodetypescript4vue3 问题描述首先,vue3中的全局变量及方法的配置较vue2中的变化大家应该已经知道了,不清楚的可以查看官方说明,但是按照官方文档结合typescript使用时遇到了问题: axios.ts // axios.ts import axios f
TSX常见简单入门用法之Vue3+Vite

目录 1.安装tsx 1.安装tsx插件 2.vite.config.ts里的配置 3.tsconfig.json里的配置 2.使用TSX 1.app.vue里的代码 2.app.tsx的代码注意: 总结 1.安装tsx 1.安装tsx插件 npm install @vitejs/plugin-vue-jsx -D 2.vite.config.ts里的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v
Vue3中setup方法的用法详解

目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l
jQuery中delegate()方法的用法详解

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).delegate(childofselector,type,data,function) 参数说明: childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函
python文件转为exe文件的方法及用法详解

一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2exe已经被用于创建wxPython,Tkinter,Pmw,PyGTK,pygame,win32com client和server,和其它的独立程序.py2exe是发布在开源许可证下的. 二.安装py2exe 从 http://prdownloads.sourceforge.net/py2exe下载
Vue3中使用defineCustomElement 定义组件详解

目录使用 Vue 构建自定义元素跳过组件解析传递 DOM 属性 defineCustomElement() 生命周期 Props 事件插槽依赖注入将 SFC 编译为自定义元素基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们
Oracle中游标Cursor基本用法详解

查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL
JSP中EL表达式的用法详解(必看篇)

EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );
Python3网络爬虫中的requests高级用法详解

本节我们再来了解下 Requests 的一些高级用法,如文件上传,代理设置,Cookies 设置等等. 1. 文件上传我们知道 Reqeuests 可以模拟提交一些数据,假如有的网站需要我们上传文件,我们同样可以利用它来上传,实现非常简单,实例如下: import requests files = {'file': open('favicon.ico', 'rb')} r = requests.post('http://httpbin.org/post', files=files) print
PyTorch中topk函数的用法详解

听名字就知道这个函数是用来求tensor中某个dim的前k大或者前k小的值以及对应的index. 用法 torch.topk(input, k, dim=None, largest=True, sorted=True, out=None) -> (Tensor, LongTensor) input:一个tensor数据 k:指明是得到前k个数据以及其index dim: 指定在哪个维度上排序, 默认是最后一个维度 largest:如果为True,按照大到小排序: 如果为False,按照小到大排序
Pytorch中膨胀卷积的用法详解

卷积和膨胀卷积在深度学习中,我们会碰到卷积的概念,我们知道卷积简单来理解就是累乘和累加,普通的卷积我们在此不做赘述,大家可以翻看相关书籍很好的理解. 最近在做项目过程中,碰到Pytorch中使用膨胀卷积的情况,想要的输入输出是图像经过四层膨胀卷积后图像的宽高尺寸不发生变化. 开始我的思路是padding='SAME'结合strides=1来实现输入输出尺寸不变,试列好多次还是有问题,报了张量错误的提示,想了好久也没找到解决方法,上网搜了下,有些人的博客说经过膨胀卷积之后图像的尺寸不发生变化,有
pytorch1.0中torch.nn.Conv2d用法详解

Conv2d的简单使用 torch 包 nn 中 Conv2d 的用法与 tensorflow 中类似,但不完全一样. 在 torch 中,Conv2d 有几个基本的参数,分别是 in_channels 输入图像的深度 out_channels 输出图像的深度 kernel_size 卷积核大小,正方形卷积只为单个数字 stride 卷积步长,默认为1 padding 卷积是否造成尺寸丢失,1为不丢失与tensorflow不一样的是,pytorch中的使用更加清晰化,我们可以使用这种方法定义输