vue3的tsx写法(v-show、v-if、v-for、v-bind、v-on)，父子组件传值

1、如下就是vue3的tsx写法，tsx写法中支持使用v-show，如下：

import {ref} from 'vue'

let appData = ref<string>('');
let flag = false;
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <p class="app_tsx" v-show={flag}>
                <span>{appData.value}111111</span>
            </p>
            <p class="app_tsx" v-show={!flag}>
                <span>{appData.value}222222</span>
            </p>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

引入app.vue中如下：

<template>
	<!-- 路由出口 -->
	我是根组件
	<RouterView>
		<renderDom></renderDom>
	</RouterView>
</template>

<script setup lang="ts">
// 导入 RouterView
import { provide, ref } from 'vue'
import { RouterView } from "vue-router";
import renderDom from './App.tsx'
provide('flag', ref(false))

</script>

<style lang="scss">
html,
body,
#app {
	height: 100%;
	width: 100%;
	color: #fff;
	.app_tsx{
		color:red;
		font-size:30px;
	}
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、当我们在tsx中使用v-if的时候，就会报错

import {ref} from 'vue'

let appData = ref<string>('');
let flag = false;
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <p class="app_tsx" v-if={flag}>
                <span>{appData.value}111111</span>
            </p>
            <p class="app_tsx" v-if={!flag}>
                <span>{appData.value}222222</span>
            </p>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

那么不能使用v-if我们可以这样使用：(三目运算符)

import {ref} from 'vue'

let appData = ref<string>('');
let flag = false;
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            {flag? <p class="app_tsx">
                <span>{appData.value}111111</span>
            </p>: <p class="app_tsx">
                <span>{appData.value}222222</span>
            </p>}
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3、既然v-if不可以在tsx语法糖中使用，那么v-for呢？如下：

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul>
                <li v-for={item in arr}>

                </li>
            </ul>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

v-for这么使用也是报错：如下

那么我们该如何实现呢？如下(tsx中的v-for正确用法✅)：

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul class="app_tsx">
                {arr.map(item => { 
                    return (<li>${ item}</li>)
                })}
            </ul>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4、v-bind在tsx中的用法
❎错误用法：

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul class="app_tsx">
                {arr.map(item => { 
                    return (<li v-bind:data-index={item}>${ item}</li>)
                })}
            </ul>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

✅正确写法如下：

vue.js学习笔记之v-bind和v-on解析

pdf 星 37KB

下载

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul class="app_tsx">
                {arr.map(item => { 
                    return (<li data-index={item}>${ item}</li>)
                })}
            </ul>
        </div>
    )
}

export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5、v-on在tsx中用法
❎错误用法

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul class="app_tsx">
                {arr.map(item => { 
                    return (<li on-click={handleClick}>${ item}</li>)
                })}
            </ul>
        </div>
    )
}
const handleClick = () => {
    console.log(1111)
}
export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

✅正确用法：(不可以使用修饰符)

import {ref} from 'vue'

let appData = ref<string>('');
let arr = [1,2,3,4,5,6,7,8]
const renderDom = () => {
    return (
        <div>
            <input type="text" v-model={appData.value} />
            <ul class="app_tsx">
                {arr.map(item => { 
                    return (<li onClick={handleClick.bind(this,item)}>${ item}</li>)
                })}
            </ul>
        </div>
    )
}
const handleClick = (item:number) => {
    console.log(item)
}
export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6、tsx的props传值(父组件给子组件传值)

①父组件

<template>
	<!-- 路由出口 -->
	我是根组件
	<RouterView>
		<renderDom title="我是唐长老"></renderDom>
	</RouterView>
</template>

<script setup lang="ts">
// 导入 RouterView
import { provide, ref } from 'vue'
import { RouterView } from "vue-router";
import renderDom from './App.tsx'
provide('flag', ref(false))

</script>

<style lang="scss">
html,
body,
#app {
	height: 100%;
	width: 100%;
	color: #fff;
	.app_tsx{
		color:red;
		font-size:30px;
	}
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

②子组件props

import {ref} from 'vue'
type Props = {
    title:string
}
const renderDom = (props:Props) => {
    return (
        <div>
           <p class="app_tsx">{props.title}</p> 
        </div>
    )
}
export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12

7、子组件给父组件传值
①子组件

import {ref} from 'vue'
type Props = {
    title:string
}
const renderDom = (props:Props,ctx:any) => {
    return (
        <div>
           <p class="app_tsx" onClick={handleClick.bind(this,ctx)}>立卡傻了大垃圾爱上链接</p> 
        </div>
    )
}
const handleClick = (ctx:any) => {
    ctx.emit('on-click',220)
}
export default renderDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

②父组件

<template>
	<!-- 路由出口 -->
	我是根组件
	<RouterView>
		<renderDom @on-click="handleEmit"></renderDom>
	</RouterView>
</template>

<script setup lang="ts">
// 导入 RouterView
import { provide, ref } from 'vue'
import { RouterView } from "vue-router";
import renderDom from './App.tsx'
provide('flag', ref(false))
const handleEmit=(val:number)=>{
     console.log(val)
}
</script>

<style lang="scss">
html,
body,
#app {
	height: 100%;
	width: 100%;
	color: #fff;
	.app_tsx{
		color:red;
		font-size:30px;
	}
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33