Vue3+TypeScript学习笔记（二十一）

App.tsx

// 第一种:直接返回一个函数
     export default function(){
         return (<div>小满</div>)
     }


      // 第二种:返回一个渲染函数
       import { defineComponent } from 'vue'


       export default defineComponent({
        data() {
            return {
                age: 23,
            }
        },
        render() {
      //  使用单花括号
            return <div>{this.age}</div>
        },
       })


      // 第三种:setup函数模式
      // optionsAPI
      // 返回一个渲染函数
      // v-show支持
      // ref template自动解包,tsx并不会 ref.value
      // v-if不支持 三元表达式代替
      // map代替v-for
      // v-bind {}代替
      // props emit
      // 插槽
      const A = (_:any,{slots}:any) => (<>
        <div>{slots.default ? slots.default() : '默认值'}</div>
        <div>{slots?.foo()}</div>
        </>)
      import { defineComponent } from 'vue'
      import { ref } from 'vue'
      interface Props {
        xiaoman?: String
      }
      export default defineComponent({
        props: {
          xiaoman: String,
        },
        emits: ['on-click'],
        setup(props: Props,{emit}) {
          const flag = ref(false)
          const message = [
            {
              name: '小满1',
            },
            {
              name: '小满2',
            },
            {
              name: '小满3',
            },
          ]
          let v = ref<string>('')
          const fn = (item:any) => {
            console.log('触发了',item)
            emit('on-click',item)
          }
          const slot = {
            default:() => (<div>小满default slots</div>),
              foo:() => (<div>小满foo slots</div>)
        }
        return () => (
        <>
        {/* 三元表达式 */}
        <div>{flag.value ? <div>true</div> : <div>false</div>}</div>
      {/* map方法:对数组中每一项元素进行处理并将返回结果封装成数组 */}
      {message.map(v => {
        return <div onClick={() => fn(v)}>{v.name}</div>
                   })}
      {/* props */}
      <div>{props.xiaoman}</div>
      {/* 插槽 */}
      <A v-slots={slot}></A>
      {/* v-model */}
      <input type="text" v-model={v.value} />
        <div>{v.value}</div>
        </>
      )
        },
        })


        // 第一种和第三种用得多,第二种用得少