vue script setup,vue3的setup函数
脚本设置是一个有争议的新功能。作为设置功能的语法糖，众说纷纭。不过经过几次迭代，目前体验还是很不错的。本文主要介绍安装脚本在vue3中应用的相关信息。有需要的可以参考一下。
目录
新功能的生成从内部变量的子代传递到父代的值的背景概要
新特性的产生背景
在你知道如何使用它之前，你可以先了解一下它推出的一些背景，这可以帮助你比较开发体验中的异同，理解为什么本章会有新的东西。
在。vue 3.0的vue组件，SFC规范的要求(注：SFC，单文件组件，vue单个组件)。setup的标准用法是，如果需要在模板中使用setup中定义的数据，则需要返回这些数据。
如果使用的是TypeScript，还需要defineComponent的帮助，帮助你自动推导出类型。
！-标准组件格式-
脚本语言
从“vue”导入{ defineComponent }
导出默认定义组件({
setup () {
//.
返回{
//.
}
}
})
/脚本
关于标准设置和定义组件的描述和用法，请参考设置功能的新章节。
引入脚本设置是为了让熟悉3.0的用户更高效地开发组件，减轻一些心理负担。只需在脚本标签中添加一个setup属性，那么整个脚本就直接变成了一个setup函数，所有的顶层变量和函数都会自动暴露给模板使用(不需要一个一个返回)。
上次写了一些第一次使用vue3的感受，同时得到了很多大佬的指点，其中最重要的是方法设置的语法糖。为了弄清楚这个语法糖，我自己又把上一页重建了一遍。果然，我得到了真香法则。用了之后发现原来的vue3也可以像react一样简单的处理和传递值。话不多说，看代码。
内部变量
首先看一下内部变量的变化，这些变量在设置之前只是简单的使用。
模板
差异
差异
子组件中的字符串：{{infor}}
/div
差异
子组件obj: {{obj.data}}
/div
差异
组件内数组：{{arry [0]}}
/div
div @click=changeInfor
改变对象
/div
/div
/模板
脚本
从“vue”导入{ ref，onMounted，defineEmits，defineProps，defineExpose，reactive }；
导出默认值{
setup(){
const infor=ref(infor )
const obj=reactive({
数据：“对象”
})
const arry=电抗([111，222，333])
const changeInfor=()={
obj.data=changeObj
}
返回{
信息，对象，阵列，变化信息
}
}
}
/脚本
风格
部门{
行高：40px
}
/风格
这是改成语法糖的代码。
模板
差异
差异
子组件中的字符串：{{infor}}
/div
差异
子组件obj: {{obj.data}}
/div
差异
组件内数组：{{arry [0]}}
/div
div @click=changeInfor
改变对象
/div
/div
/模板
脚本设置
从“vue”导入{ ref，onMounted，defineEmits，defineProps，defineExpose，reactive }；
const infor=ref(infor )
const obj=reactive({
数据：“对象”
})
const arry=电抗([111，222，333])
const changeInfor=()={
infor.value=32323
obj.data=changeObj
}
/脚本
风格
部门{
行高：40px
}
/风格
这里可以清楚地看到，不使用setup-script的方式与传统方式有很大的不同，其结构简单明了。它不需要在setup函数中写很多变量和方法，自由度很高，有点像react类中的用法。
子父级传值
主要涉及三种方法：defineEmits、defineProps和defineExpose。
//父组件
模板
差异
父组件
children ref= child @ get data= sent data :data= data /
Div{{childData 我还没有收到值 }}/div
Div @ click= makelid 单击以调用子组件方法/div
/div
/模板
脚本设置
从“vue”导入{ ref，onMounted，defineEmits，defineProps，defineExpose，reactive }；
从导入孩子。/components/children.vue
const childData=ref( )
Const data=ref(来自父组件的值属性传递值)
const sentData=(data)={
childData.value=data
}
Const child=ref(null) //获取子组件ref
const makeClid=()={
Child.value.setData(“已调用子组件”)
}
/脚本
//子组件
模板
差异
{{fatherData 父组件还没有给我打电话 }}
Div @click=getData 触发父组件/div
divfatherProps:{ { father props } }/div
/div
/模板
脚本设置
从“vue”导入{ ref，onMounted，defineEmits，defineProps，defineExpose，reactive }；
const fatherData=ref( )
const fatherProps=ref( )
Const props=defineProps({ //父组件传递值
数据：字符串
})
fatherProps.value=props.data
const emit=define emisses([ get data ])//接受父组件数据
const getData=()={
Emit(getData ， value to parent component )//触发父组件的方法
}
Const setData=(val)={ //父组件调用
fatherData.value=val
}
DefineExpose({ //throw方法
获取数据，
设置数据
})
/脚本
子组件调用父组件：这个很好理解。它类似于vue2。@getData挂载在父组件中，子组件通过define metrics的方法获取。最后，父组件调用子组件使用和前面一样的方式：还是有很大的区别，需要子组件先定义方法，然后通过defineExpose进行公开。父组件创建一个ref，要创建的变量名和子组件的ref名都是。否则，得到它。
总结
这就是这篇关于设置脚本在vue3中的应用的文章。关于在Vue3中应用setup-script的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。