tsx

<template>

  <Tsx name="jsx传值" @toEmit="getEmitValue"></Tsx>

  {{ msg }}

  </template>

 

  <script setup lang='ts'>

 

  import Tsx from './index.tsx'

  import { ref } from 'vue'

  let msg = ref('')

  const getEmitValue = (value:string) => {

    msg.value = value

  }

  </script>

 

  <style scoped lang='scss'>

 

  </style>

 

// 第一种写法

// export default function () {

//   return <div>123</div>

// }

// 第二种写法

// import { defineComponent } from 'vue'

// export default defineComponent({

//   data () {

//     return {

//       age: '18'

//     }

//   },

//   render () {

//     return <div>{this.age}通过this获取,和单括号解析</div>

//   }

// })

// 第三种写法

import { defineComponent, ref } from 'vue'

// 插槽其实就是一个接受参数渲染对应模板的函数

const A = (_, { slots }) => {

  return (

    <>

      <div>{slots.default ? slots.default() : '默认值'}</div>

      <div>{slots.foo?.()}</div>

    </>

  );

}

export default defineComponent({

  props: {

    name: String

  },

  emits:['toEmit'],

  setup (props, {emit}) { // setup 模式

    // v-show 生效

    // let falg = true

    // return () => (  // 此处是() => () 渲染函数

    //   <div v-show={falg}>setup模式</div>

    // )

    // v-bind用{}

    // let falg = '123'

    // return () => (  // 此处是() => () 渲染函数

    //   <div data-name={falg}>setup模式</div>

    // )

    // ref无法自动解析，需要通过.value

    // let falg = ref(true)

    // return () => (  // 此处是() => () 渲染函数

    //   <div v-show={falg.value}>setup模式</div>

    // )

    // v-if无法使用，通过三元代替

    // let falg = true

    // return () => (

    //   <div>{falg ? 'setup模式' : ''}</div>

    // )

    // v-for不支持，通过js遍历的方式实现

    // const arr = [

    //   {

    //     name: '大'

    //   },

    //   {

    //     name: '小'

    //   }

    // ]

    // 使用<></>包裹

    // return () => (

    //   <>

    //     {

    //       arr.map(v => {

    //         return <div>{v.name}</div>

    //       })

    //     }

    //     不中

    //   </>

    // )

    // props、emit、click事件的使用

    // const fn = () => {

    //   console.log("%c Line:77 🥖", "color:#e41a6a");

    //   emit('toEmit','我传过去') // emit需要在setup定义一下

    // }

    // return () => (

    //   <>

    //   {props.name}props需要在setup参数中定义

    //   <button onClick={() => fn()}>click事件名为onclick,并且fn不能直接写fn(),会默认执行，需要函数柯里化一下</button>

    //   </>

    // )

    // v-slots插槽使用

    // 其实就是使用js编写一个函数，使用v-slots传进去，然后函数接受数值来渲染传进去的东西

    // const slot = {

    //   default: () => (<div>我是默认值</div>),

    //   foo: () => (<div>我是foo</div>)

    // }

    // return () => (

    //   <A v-slots={slot}></A>

    // )

    // 支持使用v-model

    let data = ref('')

    return () => (

      <>

        <input type="text"  v-model={data.value}/>

        {data.value}

      </>

    )

  },

})