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找到对应的方法。
总结
上一篇：vue实现商品规格选择功能
栏 目：vue
下一篇：vue中radio根据动态值绑定checked无效的解决
本文地址：http://www.codeinn.net/misctech/226173.html
