脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 setup-script应用

vue3中setup-script的应用实例

 更新时间：2022年01月18日 10:40:55   作者：MWH  
script-setup是一个比较有争议的新特性,作为 setup 函数的语法糖,褒贬不一,不过经历了几次迭代之后,目前在体验上来说,感受还是非常棒的,这篇文章主要给大家介绍了关于vue3中setup-script应用的相关资料,需要的朋友可以参考下

新特性的产生背景

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

在 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应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue选择下拉框动态变化表单方式

    vue选择下拉框动态变化表单方式

    这篇文章主要介绍了vue选择下拉框动态变化表单方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,需要的朋友可以参考下
    2023-08-08
  • vue中是怎样监听数组变化的

    vue中是怎样监听数组变化的

    这篇文章主要介绍了vue中是怎样监听数组变化的，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
    2020-10-10
  • vue刷新后瞬间闪烁,无法解析的问题

    vue刷新后瞬间闪烁,无法解析的问题

    这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-print-nb只打印一页解决方法示例

    vue-print-nb只打印一页解决方法示例

    这篇文章主要为大家介绍了vue-print-nb只打印一页解决方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-11-11
  • 前端小技能之Vue集成百度离线地图功能总结

    前端小技能之Vue集成百度离线地图功能总结

    最近项目里集成了百度地图的一些功能,所以下面这篇文章主要给大家介绍了关于前端小技能之Vue集成百度离线地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • vue弹窗里面使用echarts不显示的问题及解决

    vue弹窗里面使用echarts不显示的问题及解决

    这篇文章主要介绍了vue弹窗里面使用echarts不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • vue+iview+less 实现换肤功能

    vue+iview+less 实现换肤功能

    这篇文章主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli，css框架选择的iview，具体操作流程大家跟随脚本之家小编一起看看吧
    2018-08-08
  • 解决vue页面注入js修改input值问题

    解决vue页面注入js修改input值问题

    这篇文章主要介绍了解决vue页面注入js修改input值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue transition 在子组件中失效的解决

    vue transition 在子组件中失效的解决

    今天小编就为大家分享一篇vue transition 在子组件中失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论