vue3区别,
vue3发布已有一段时间了，文档也大概看了一下，不过对于学一门技术，最好的方法还是实战，这篇文章主要给大家介绍了关于vue3不同语法格式对比的相关资料，需要的朋友可以参考下
默认的模板方式，和vue2差不多，在组件中使用设置函数
//父组件
模板
差异
差异
div{{city}}/div
button @click=changeReactive 改变反应式/按钮
button @click=handleFather 点击父组件/按钮
/div
child ref= child ref @ handle BTN= handle BTN @ test click= test click city=成都 /
/div
/模板
脚本
从“vue”导入{ ref，onMounted，toRefs，reactive }
从导入子级 Child.vue
导出默认值{
组件：{
儿童
},
setup () {
const handleBtn=(val)={
console.log(btn ，val)
}
const testClick=(val)={
console.log(testClick ，val)
}
const childRef=ref(null)
const handleFather=()={
子引用。价值。观察到。a=666//父组件修改子组件的值
console.log(获取子组件的方法，childRef.value)
//子组件需要定义揭露，如果不定义，那么需要返回，相应的函数，一般不直接返回，如果页面上没有用到
//直接通过揭露（暴露)需要的方法或者值就行了
}
//通过设置函数的方法写，需要返回，页面上用到的方法，和值
//如果是反应定义的值，通过解构的方式页面上渲染的值不是响应式的，需要通过托雷夫斯转换，然后解构
//.toRefs(测试反应)
常数测试反应=反应({
城市： 北京，
年龄：22岁
})
const changeReactive=()={
testReactive.city=重庆
}
返回{
handleBtn，
测试点击，
处理父亲，
.toRefs(测试反应),
改变反应，
childRef
}
}
}
/脚本
//子组件
模板
差异
{{observed.a}}
button @click=handleBtn 点击/按钮
/div
/模板
脚本
从“vue”导入{ defineProps，defineEmit，define emit，defineExpose，reactive }
导出默认值{
道具：{
城市：字符串
},
/* 设置这个主要是为了，让ctx.attrs访问不到这个属性*/
/*道具上设置了有的属性，在属性列表上，也不会显示*/
发出：[testClick]，//设置这个的目的，是为了让属性列表上没有对应的自定义方法，
//子组件如果设置了人们，那么在属性列表上也访问不到对应的值
//arrts在vue3中功能有所增强，挂载了自定义方法，和类别、风格
//在vue2中自定义方法是挂载到，$listeners，在vue3中$liseners已被移除
设置（道具、ctx) {
const { expose，emit }=ctx
const handleBtn=()={
console.log(btn ，ctx)
发出("测试点击",666)
}
观察到的常数=反应值({
答：1
})
函数clickChild (value) {
观察到的a=值
}
暴露({
clickChild，//暴露自定义方法，父组件调用
观察到的//暴露子组件的值
})
返回{
观察到，
handleBtn
}
}
}
/脚本
在脚本标签上写安装脚本安装
//父组件
模板
差异
button @click=handleFather 点击父/按钮
child ref= child ref @ handle BTN= handle BTN @ test click= test click city=成都 /
/div
/模板
脚本设置
从“vue”导入{ ref }
从导入子级 Child.vue
//这种方式写不用在返回导出页面上用到的方法和值，需要用什么直接在某视频剪辑软件上解构出对应的定义
const childRef=ref(null)
const handleBtn=(val)={
console.log(btn ，val)
}
const testClick=(val)={
console.log(testClick ，val)
}
const handleFather=()={
console.log(获取子组件的方法，childRef.value)
子引用。价值。testfatherclick()//父组件调用子组件的方法
//子组件通过定义展示暴露出对应的方法
}
/脚本
//子组件
模板
差异
button @click=handleBtn 点击/按钮
/div
/模板
脚本设置
从“vue”导入{定义推广，定义限制，定义展示，反应}
const props=defineProps({
城市：字符串
})
const emit=define发出([ handle BTN ， testClick])
const handleBtn=()={
//console.log(btn ，props，emit)
发出(“测试点击”，12)
}
const testFatherClick=()={
console.log(测试父组件点击子组件)
}
观察到的常数=反应值({
答：1
})
defineExpose({ //暴露方法给父组价
testFatherClick，
观察
})
/脚本
样式范围
/风格
通过小艾方式渲染，非常接近反应的方式，也是我最推荐的方式，jsx对分时（同分时)也很支持，某视频剪辑软件文件没有多伦多股票交易所支持得好
//父组件
从“vue”导入{参考，反应}
从导入子级 Child.jsx
const Father={
setup() {
//在小艾中定义的裁判员在页面上使用需要通过。价值去访问
const city=ref(北京)
const changeCity=()={
city.value=杭州
}
const childRef=ref(null)
const handelFather=(add)={
//也是通过在组件暴露揭露方法
//city.value=杭州
console.log(childRef ，childRef.value)
}
const testChildClick=(val)={
console.log(测试子组件点击，val)
}
return ()={
返回（
差异
div{city.value}/div
button onClick={changeCity}改变城市/按钮
button onClick={handelFather}点击父/按钮
子测试子单击={测试子单击} ref={ child ref }/
/div
)
}
}
}
导出默认父亲
//子组件
从“vue”导入{参考，反应}
const Child={
道具：{
testChildClick:函数
},
设置（道具，{发射，暴露}) {
const { testChildClick }=props
const testFatherClick=()={
console.log(测试父组件点击子组件)
}
const handelBtn=()={
//emit(testChildClick) //在小艾中这种方式不行
//console.log(props ，props)
testChildClick(返回值给父组件)
//只能通过这种方法，这也相当于反应过来，相当于传递一个函数给子组件，子组件把值，通过函数传给父组件
}
暴露({
testFatherClick
})
return ()={
返回（
差异
button onClick={handelBtn}子组件传值给父组件/按钮
/div
)
}
}
}
导出默认子项
总结
到此这篇关于vue3不同语法格式对比的文章就介绍到这了，更多相关vue3语法格式对比内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。