扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3中setup-script的应用实例
  • 689

0
分享到

vue3中setup-script的应用实例

2024-04-02 19:04:59 689人浏览 独家记忆
摘要

目录新特性的产生背景内部变量子父级传值总结新特性的产生背景 在了解它怎么用之前，可以先了解一下它被推出的一些背景，可以帮助你对比开发体验上的异同点，以及了解为什么会有这一章节里面的新

新特性的产生背景

在了解它怎么用之前，可以先了解一下它被推出的一些背景，可以帮助你对比开发体验上的异同点，以及了解为什么会有这一章节里面的新东西。

在 Vue 3.0 的 .vue 组件里，遵循 SFC 规范要求（注：SFC，即 Single-File Component，.vue 单组件），标准的 setup 用法是，在 setup 里面定义的数据如果需要在 template 使用，都需要 return 出来。

如果你使用的是 typescript ，还需要借助 defineComponent 来帮助你对类型的自动推导。

<!-- 标准组件格式 -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    // ...

    return {
      // ...
    }
  }
})
</script>

关于标准 setup 和 defineComponent 的说明和用法，可以查阅 全新的 setup 函数 一节。

script-setup 的推出是为了让熟悉 3.0 的用户可以更高效率的开发组件，减少一些心智负担，只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成 setup 函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return 了）。

上次写了关于自己初次使用vue3的一些感受，同时也获取了一众大佬的教导，其中最重要的是方法的setup的语法糖，为了搞清楚这个语法糖，我自己有把之前的页面，又重新重构了一次。果然得到真香定律，使用以后发现原来vue3还可以像React那样简洁的处理方法和传值，话不多说上代码看下吧

内部变量

首先看下内部变量变化，这是单纯之前使用setup

    <template>
    <div>
       <div>
            子组件内String：{{infor}}
       </div>
        <div>
            子组件内obj：{{obj.data}}
        </div>
        <div>
            子组件内arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改变obj
        </div>
    </div>
   
</template>

<script>
    import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
    export default {
        setup(){
             const infor = ref('infor')
             const obj  = reactive({
                data:'obj'
            })
            const arry  = reactive([111,222,333])
            const changeInfor  = () =>{
                obj.data = 'changeObj'
            }

            return {
                infor, obj, arry, changeInfor
            }
        }
    }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>

这是改成语法糖之后的代码

    <template>
    <div>
       <div>
            子组件内String：{{infor}}
       </div>
        <div>
            子组件内obj：{{obj.data}}
        </div>
        <div>
            子组件内arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改变obj
        </div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const infor = ref('infor')
      const obj  = reactive({
          data:'obj'
      })
      const arry  = reactive([111,222,333])
      const changeInfor  = () =>{
          infor.value = '32323'
          obj.data = 'changeObj'
      }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>

这里可以明显看出来，未使用setup-script的方式，跟传统的还是有很大区别的， 结构简单明了，不需要把大量的变量和方法都写在setup这个函数里面，自由度很高，有点像react的类里面的使用方法

子父级传值

这里面主要涉及到三个方法 defineEmits，defineProps，defineExpose

// 父组件
<template>
    <div>
        父组件
        <children ref="child" @getData="sentData" :data="data"/>
        <div>{{childData || '我还没收到值'}}</div>
        <div @click="makeClid">点击调用子组件方法</div>
    </div>
</template>
<script setup>
  import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
  import children from './components/children.vue'
  const childData = ref('')
  const data = ref('父组件给的值prop传值')
  const sentData = (data) =>{
    childData.value = data
  }
  const child = ref(null) // 获取子组件ref
  const makeClid = () =>{
    child.value.setData('子组件已调用')
  }
</script>


// 子组件
<template>
    <div>
       {{fatherData || '父组件还未调用我'}}
       <div @click="getData">触发父组件</div>
       <div>fatherProps:{{fatherProps}}</div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const fatherData = ref('')
      const fatherProps = ref('')
      const props = defineProps({ // 父组件传值
          data:String
      })
        fatherProps.value = props.data
      const emit = defineEmits(['getData']) // 接受父组件数据
      const getData = () =>{
          emit('getData','给父组件的值')  // 触发父组件的方法
      }

      const setData = (val) =>{ // 父组件调用
          fatherData.value = val
      }

      defineExpose({  // 抛出方法
            getData,
            setData
        })
</script>
  • 子组件调用父组件：这点很好理解，跟vue2差不多的形式，父组件里面挂载@getData，子组件里面通过defineEmits这个方法获取，最后调用方式跟之前也是一样的
  • 父组件调用子组件：这点区别还是很大的，需要子组件先定义好方法，然后通过defineExpose暴露出去，父组件创建ref,这里需要创建的变量名字和子组件的ref名字一直，否者获取不到，最后通过获取抛出的value找到对应的方法。

总结

到此这篇关于vue3中setup-script应用的文章就介绍到这了,更多相关vue3 setup-script应用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: vue3中setup-script的应用实例

本文链接: https://lsjlt.com/news/162828.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue3中setup-script的应用实例
    目录新特性的产生背景内部变量子父级传值总结新特性的产生背景 在了解它怎么用之前，可以先了解一下它被推出的一些背景，可以帮助你对比开发体验上的异同点，以及了解为什么会有这一章节里面的新...
    99+
    2024-04-02
  • Vue3中setup script怎么用
    这篇文章主要为大家展示了“Vue3中setup script怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue3中setup script怎么用”这篇文章吧。前言Vu...
    99+
    2023-06-29
  • vue3中＜script setup＞ 和 setup函数的区别对比
    目录一、基本语法setup函数的写法在＜script setup＞语法糖的写法二、使用外部文件区别setup函数＜script setup＞语法糖三、注册组件setup函数＜scri...
    99+
    2023-05-18
    vue3＜script setup＞ 和 setup函数区别 vue3＜script setup＞
  • vue3中单文件组件<script setup>实例详解
    目录一、相比普通script语法的优势二、基本语法三、响应式四、使用组件五、使用自定义指令六、defineProps 和 defineEmits七、defineExpose八、use...
    99+
    2024-04-02
  • Vue3中的script setup语法糖怎么使用
    这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获，下面我们一起来看看吧。scr...
    99+
    2023-07-04
  • Vue3 - setup script的使用体验分享
    目录前言使用导出变量&方法使用组件使用props - defineProps使用emits - defineEmit使用context - useContext指令总结前言 ...
    99+
    2024-04-02
  • vue3基于script setup语法$refs的使用
    目录一、vue2语法二、vue3使用1. 组件设置ref值2. 组件实例获取3. 子组件内设置对外公开的变量一、vue2语法 vue2语法在组件上设置ref属性后，在代码里可以通过 ...
    99+
    2024-04-02
  • 一文详解Vue3中的script setup语法糖
    在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用这里强调一句 “暴露给模板，跟暴露给外部不是一回事”TIP：说的通俗一点，就是在使用 Vue 3 生命...
    99+
    2022-11-22
    前端 Vue.js
  • Vue3 setup 的作用实例详解
    目录setup 具体怎么用：setup 的数据和方法如何使用？setup 参数setup 特性总结：总结：Vue3中setup函数的作用与实现从 vue2 升级 vue3，vue3 ...
    99+
    2022-12-29
    Vue3 setup 的作用 Vue3 setup
  • 怎么在Vue3中使用＜script lang=“ts“ setup＞语法糖
    迁移组件以下组件有两个道具（要显示的和一个标志）。通过另一个组件，计算模板中显示的小马图像的URL，基于这两个道具。该组件还会在用户单击它时发出一个事件。The image selected while the Ponypony ...
    99+
    2023-05-16
    Vue3 setup
  • 如何在Vue3中使用＜script lang=“ts“ setup＞语法糖
    这篇“如何在Vue3中使用＜script lang=“ts“ setup＞语法糖”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下...
    99+
    2023-07-06
  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)
    在 vue2 中 ref 被用来获取对应的子元素，然后调用子元素内部的方法。 <template> <!-- 子组件 --> <TestComp...
    99+
    2022-11-13
    Vue3 父组件调用子组件 Vue父组件子组件
  • 如何进行vue3基于script setup语法$refs的使用
    如何进行vue3基于script setup语法$refs的使用，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、vue2语法vue2语法在组件上设置ref属性后...
    99+
    2023-06-22
  • Vue3中SetUp的参数props和context实例分析
    本篇内容介绍了“Vue3中SetUp的参数props和context实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读...
    99+
    2024-04-02
  • script setup 语法的使用方法
    这篇文章主要介绍“script setup 语法的使用方法”，在日常操作中，相信很多人在script setup 语法的使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • vue3更新的setup语法糖实例详解
    目录前言语法糖用法：语法糖带来的体验一、组件自动注册二、属性及方法无需return三、自动将文件名定义为组件的name属性1、defineProps2、defineEmits3、de...
    99+
    2024-04-02
  • setup+ref+reactive实现vue3响应式功能
    setup 是用来写组合式 api ，内部的数据和方法需要通过 return 之后，模板才能使用。在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 s...
    99+
    2024-04-02
  • vue3 setup() 高级用法示例详解
    目录一、选项式API 和 组合式API 区别二、setup 具体怎么用？2.1、setup 什么时候执行？2.2、setup 数据和方法如何使用？2.3、setup 内部有 this...
    99+
    2024-04-02
  • vue3中setup语法糖下通用的分页插件实例详解
    目录vue3中setup语法糖下父子组件之间的通信准备工作父传子：子传父：先给大家介绍下vue3中setup语法糖下通用的分页插件，内容如下所示： 效果 自定义分页插件：PageP...
    99+
    2022-11-13
    vue3 setup语法糖 vue3 分页插件 vue父子组件
  • 怎么使用vue3的setup()
    本篇内容主要讲解“怎么使用vue3的setup()”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用vue3的setup()”吧!从 vue2 升级到 vue3，vue3 是可以兼容 vue...
    99+
    2023-06-25
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作