美文网首页
vue3 setup标签语法和export default 简洁

vue3 setup标签语法和export default 简洁

作者: ThisWu | 来源:发表于2022-12-08 19:56 被阅读0次

    vue2里面可以直接在data声明响应式变量后可以直接在模板语言里直接使用,vue其实也也可以。因为有setup标签和export default两种编码规则所以一下也包含了两种介绍:

    第一种 export default,一般用于3.2前,因为当时不支持setup标签语法

    // 声明响应式变量
    let state = reactive({
              value: Value,
                width: '100%',
      })
    
     return {
                ...toRefs(state),    // 解构响应式变量
            }
    

    第二种 setup标签语法

    // 声明state
      const state = reactive({    name: 'Jerry'
      })       // 将方法、变量暴露给父组件使用,父组件才可通过ref API拿到子组件暴露的数据
      defineExpose({    // 解构state
        ...toRefs(state),    // 声明方法
        changeName () {      state.name = 'Tom'
        }  })
    

    相关文章

      网友评论

          本文标题:vue3 setup标签语法和export default 简洁

          本文链接:https://www.haomeiwen.com/subject/jxmafdtx.html