vue3发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,这篇文章主要给大家介绍了关于vue3不同语法格式对比的相关资料,需要的朋友可以参考下
默认的模板方式，和vue2差不多，在组件中使用setup函数
// 父组件 <div> <div> <div>{{city}}</div><button>改变reactive</button><button>点击父组件</button></div></div> /<div>本文来源gaodai.ma#com搞##代!^码7网</div>/子组件 <div> {{observed.a}} <button>点击</button></div>
在script标签上写setup // 子组件
通过jsx方式渲染，非常接近react的方式，也是我最推荐的方式，jsx对ts也很支持，.vue文件没有tsx支持得好
// 父组件 import { ref, reactive } from 'vue' import Child from './Child.jsx' const Father = { setup() { // 在jsx中定义的ref在页面上使用需要通过.value去访问 const city = ref('北京') const changeCity = () => { city.value = '杭州' } const childRef = ref(null) const handelFather = (add) => { //也是通过在组件暴露expose方法 // city.value = '杭州' console.log('childRef', childRef.value) } const testChildClick = (val) => { console.log('测试子组件点击', val) } return () => { return ( <div> <div>{city.value}</div><button>改变城市</button><button>点击父</button></div> ) } } } export default Father //子组件 import { ref, reactive } from 'vue' const Child = { props: { testChildClick: Function }, setup(props, { emit, expose }) { const { testChildClick } = props const testFatherClick = () => { console.log('测试父组件点击子组件') } const handelBtn = () => { // emit('testChildClick') //在jsx中这种方式不行 // console.log('props', props) testChildClick('返回值给父组件') // 只能通过这种方法，这也相当于react，相当于传递一个函数给子组件，子组件把值，通过函数传给父组件 } expose({ testFatherClick }) return () => { return ( <div> <button>子组件传值给父组件</button></div> ) } } } export default Child
总结
到此这篇关于vue3不同语法格式对比的文章就介绍到这了,更多相关vue3语法格式对比内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
