Use .jsx format files and defineComponent
defineComponent can be passed into the setup function or component configuration
Use single brackets for interpolation {}
// 父 <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 } })
There is a big difference in syntax:
JSX is essentially js code, and you can use any ability of js
template can only embed simple js expressions, other instructions are required, such as v-if
JSX has become an ES specification, and template is still Vue’s own The specifications
are essentially the same:
will be compiled into js code (render function)
template uses double brackets {{ }}
jsx uses Single brackets { }
// template <template> <p>{{ name }} -- {{ age }}</p> </template> // jsx const render = () => { return <> <p>child {props.a}</p> </> }
template When using the component name, you can change the case or the Camel case, jsx cannot be changed
Introduces dynamic parameters, template uses colon parameter name (:msg='msg'), jsx does not require colon
// 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 differentiates between properties and events, jsx does not differentiate
// 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 })
Conditional template uses the v-if instruction , jsx uses && in expressions (similar to 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 })
The loop template uses the v-for instruction, jsx uses the .map function of the array
// 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 is a concept invented by Vue. In order to improve the ability of template
slot has always been The "nightmare" of Vue beginners, especially: scope slot
But using JSX will be easy to understand, because JSX is essentially js
The above is the detailed content of How to use JSX with Vue3?. For more information, please follow other related articles on the PHP Chinese website!