vue3不同语法格式对比的实例代码

默认的模板方式，和vue2差不多，在组件中使用setup函数

// 父组件





//子组件

在script标签上写setup  // 子组件

通过jsx方式渲染，非常接近react的方式，也是我最推荐的方式，jsx对ts也很支持，.vue文件没有tsx支持得好

// 父组件
import { ref, reactive } from 'vue'
import Child from './Child.jsx'

const Father = {
  setup() {
    // 在jsx中定义的ref在页面上使用需要通过.value去访问
    const city = ref('北京')

    const changeCity = () => {
      city.value = '杭州'
    }

    const childRef = ref(null)

    const handelFather = (add) => {
      //也是通过在组件暴露expose方法
      // city.value = '杭州'
      console.log('childRef', childRef.value)
    }

    const testChildClick = (val) => {
      console.log('测试子组件点击', val)
    }

    return () => {
      return (
        

          
{city.value}
          改变城市
          点击父
          
        
      )
    }
  }
}

export default Father


//子组件
import { ref, reactive } from 'vue'

const Child = {
  props: {
    testChildClick: Function
  },

  setup(props, { emit, expose }) {
    const { testChildClick } = props
    const testFatherClick = () => {
      console.log('测试父组件点击子组件')
    }

    const handelBtn = () => {
      // emit('testChildClick') //在jsx中这种方式不行
      // console.log('props', props)
      testChildClick('返回值给父组件')
      // 只能通过这种方法，这也相当于react，相当于传递一个函数给子组件，子组件把值，通过函数传给父组件
    }

    expose({
      testFatherClick
    })

    return () => {
      return (
        

          子组件传值给父组件
        
      )
    }
  }
}

export default Child

总结

到此这篇关于vue3不同语法格式对比的文章就介绍到这了,更多相关vue3语法格式对比内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！