脚本宝典收集整理的这篇文章主要介绍了Vue3使用JSX的方法实例(笔记自用),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
// 父 <template> <div class="home"> <JSXDemo1 /> </div> </template> <script> import JSXDemo1 From '@/components/JSXDemo1.vue' export default { name: 'HomeView', components: { JSXDemo1 } } </script> // JSXDemo1.vue <script> import { ref } from 'vue' export default { setup () { const countRef = ref(200) const render = () => { return <p>DEMO1--{countRef.value}</p> // jsx就是js语法,所以要加 .value } return render } } </script>
// 父组件 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { // 传入 setup 函数 const countRef = ref(300) const render = () => { return <> <p>DEMO2--{countRef.value}</p> <JSXChild a={countRef.value + 100}></JSXChild> </> } return render }) // 子组件 JSXChild.jsx import { defineComponent } from 'vue' export default defineComponent({ // 传入组件配置 PRops: ['a'], setup (props) { const render = () => { return <> <p>child {props.a}</p> </> } return render } })
- template 使用双括号 {{ }}
- jsx 使用单括号 { }
// template <template> <p>{{ name }} -- {{ age }}</p> </template> // jsx const render = () => { return <> <p>child {props.a}</p> </> }
// template <template> <div class="home"> <watch-effect :msg="msgRef"/> </div> </template> <script> import { ref } from 'vue' import WatchEffect from '@/components/WatchEffect.vue' export default { name: 'HomeView', components: { WatchEffect, }, setup () { const msgRef = ref('123') return { msgRef } } } </script> // jsx 组件名称不可变,要和引入名字保持一致 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { const countRef = ref(300) const render = () => { return <> <p>DEMO2--{countRef.value}</p> <JSXChild a={countRef.value + 100}></JSXChild> </> } return render })
template 区分属性和事件的写法,jsx 不区分
// jsx 属性和事件的写法一样 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { const countRef = ref(300) function onChange () { console.LOG('onChange') } const render = () => { return <> <p>DEMO2--{countRef.value}</p> <JSXChild a={countRef.value + 100} change={onChange}></JSXChild> </> } return render })
条件 template 使用 v-if 指令,jsx 在表达式中使用 && (类似 if( a && b))
// template v-if <template> <p v-if="flagRef">template demo</p> <button @click="changeFlagRef">click</button> </template> <script> import { ref } from 'vue' export default { setup () { const flagRef = ref(true) function changeFlagRef () { flagRef.value = !flagRef.value } return { flagRef, changeFlagRef } } } </script> // jsx &&符号判断 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { const flagRef = ref(true) function changeFlagRef () { flagRef.value = !flagRef.value } const render = () => { return <> <p onClick={changeFlagRef}>DEMO2--{flagRef.value.toString()}</p> {flagRef.value && <JSXChild a={flagRef.value}></JSXChild>} </> } return render })
循环 template 使用 v-for 指令,jsx 使用数组的 .map 函数
// template v-for <template> <ul> <li v-for="ITem in state.list" :key="item">{{ item }}</li> </ul> </template> <script> import { reactive } from 'vue' export default { setup () { const state = reactive({ list: ['a', 'b', 'c'] }) return { state } } } </script> // jsx 数组 .map 函数 import { defineComponent, reactive } from 'vue' export default defineComponent(() => { const state = reactive({ list: ['a1', 'b1', 'c1'] }) const render = () => { return <> <ul> {state.list.map(item => <li>{item}</li>)} </ul> </> } return render })
- slot 是 Vue 发明的概念,为了完善 template 的能力
- slot 一直是 Vue 初学者的“噩梦”,特别是:作用域 slot
- 但使用 JSX 将很容易理解,因为 JSX 本质就是 js
到此这篇关于Vue3使用JSX的文章就介绍到这了,更多相关Vue3使用JSX内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的Vue3使用JSX的方法实例(笔记自用)全部内容,希望文章能够帮你解决Vue3使用JSX的方法实例(笔记自用)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。