美文网首页IT技术篇
Vue3 setup语法糖解析

Vue3 setup语法糖解析

作者: 燕自浩 | 来源:发表于2022-08-15 17:49 被阅读0次

    setup说明
    Vue3.0template中想要使用setup中的变量和函数必须return暴露变量出来,template中才可以使用;
    缺陷就是会导致在页面上变量会出现很多次,使页面变得不整洁。
    很不友好,vue3.2只需要在script标签中添加setup属性,可以帮助我们解决这个问题。
    组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default
    甚至是自定义指令也可以在我们的template中自动获得。

    代码示例

    1. 使用setup作为script 的属性
    <template>
      <div class="main">
        显示的值{{flag}}
        <button @click="handleSetValue">设置值</button>
      </div>
    </template>
    <!-- 只需要在script上添加setup -->
    <script lang="ts" setup>
        import { ref } from 'vue';
        // flag变量不需要在 return出去了
        const flag = ref("初始值")
    
        // 函数也可以直接引用,不用在return中返回
        const handleSetValue=():void=>{
            flag.value='改变了'
        }
    </script>
    
    1. 使用setup作为函数
    <template>
      <div class="main">
        显示的值{{ flag }}
        <button @click="handleSetValue">设置值</button>
      </div>
    </template>
    <script lang="ts" setup>
        import { ref } from 'vue';
        setup() {
            const flag = ref("初始值")
            const handleSetValue=():void=>{
                flag.value='改变了'
            }
            return {
                flag,
                handleSetValue
            }
        }
    </script>
    

    组件不需要再注册

    <template>
        <div>
            我是子组件
        </div>
    </template>
    
    // 父组件
    <template>
      <div class="home">
        <test-com />
      </div>
    </template>
    <script lang="ts" setup>
    // 组件命名采用的是大驼峰,引入后不需要在注册,是不是爽歪歪呀!
    // 在使用的时候直接是小写和横杠的方式连接 test-com
    import TestCom from "../components/TestCom.vue"
    </script>
    

    script setup 中,
    引入的组件可以直接使用无需再通过components进行注册
    并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。
    当我们的页面上需要使用很多组件时,它的功能一下就体现出来了。

    新增 defineProps

    刚刚我一直在强调,不需要使用setup函数,机智的小伙伴会说:
    那么子组件怎么接受父组件传递过来的值呢?
    props,emit怎么获取呢?
    别担心,新的api出现了,我们的主角 defineProps

    defineProps 的使用

    父组件传递参数

    <template>
      <div class="home">
        <test-com :info="msg" time="42分钟" />
      </div>
    </template>
    <script lang="ts" setup>
    // 组件命名采用的是大驼峰,引入后不需要在注册,是不是爽歪歪呀!
    import TestCom from "../components/TestCom.vue"
    let msg='公交车-第一次循环'
    </script>
    

    子组件接受参数

    <template>
        <div>
            <h2> 你好-我是Vue</h2>
            <p>信息:{{ info}}</p>
            <p>{{ time }}</p>
        </div>
    </template>
    <script lang="ts" setup>
    import {defineProps} from 'vue'
    defineProps({
        info:{
            type:String,
            default:'----'
        },
        time:{
            type:String,
            default:'0分钟'
        },
    })
    </script>
    

    子组件怎么向父组件抛出事件?defineEmits的到来!

    子组件使用

    <!-- 别担心,我们使用defineEmits。它可以向父组件抛出事件。-->
    <template>
        <div>
            <h2> 你好-我是Vue</h2>
            <button @click="hander1Click">新增</button>
            <button @click="hander2Click">删除</button>
        </div>
    </template>
    
    <script lang="ts" setup>
    import {defineEmits} from 'vue'
    //  使用defineEmits创建名称,接受一个数组
    const $myemit=defineEmits(['myAdd','myDel'])
    const hander1Click=():void=>{
        $myemit('myAdd','新增的数据')
    }
    
    const hander2Click=():void=>{
        $myemit('myDel','删除的数据')
    }
    </script>
    

    父组件

    <template>
      <div class="home">
        <test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
      </div>
    </template>
    <script lang="ts" setup>
    // 组件命名采用的是大驼峰,引入后不需要在注册,是不是爽歪歪呀!
    // 在使用的使用直接是小写和横杠的方式连接 test-com
    import TestCom from "../components/TestCom.vue"
    const myAddHander=(mess):void=>{
      console.log('新增==>',mess);
    }
    
    const myDelHander=(mess):void=>{
      console.log('删除==>', mess);
    }
    </script>
    

    如何获取子组件中的属性值

    子组件

    <template>
        <div>
            <h2> 你好-我是Vue</h2>
            <p>性别:{{ sex}}</p>
            <p>其他信息:{{ info}}</p>
        </div>
    </template>
    
    <script lang="ts" setup>
    import { reactive, ref, defineExpose } from "vue";
    const sex=ref('男')
    const info = reactive({
        like:'喜欢Vue',
        age:27
    })
    // 将组件中的属性暴露出去,这样父组件可以获取
    defineExpose({
        sex,
        info
    })
    </script>
    

    父组件

    <template>
      <div class="home">
        <test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com>
        <button @click="getSonHander">获取子组件中的数据</button>
      </div>
    </template>
    <script lang="ts" setup>
    import TestCom from "../components/TestCom.vue"
    import {ref} from 'vue'
    const testcomRef = ref()
    const getSonHander= () =>{
      console.log('获取子组件中的性别', testcomRef.value.sex );
      console.log('获取子组件中的其他信息', testcomRef.value.info );
    }
    </script>
    

    本文章借鉴作者:BingJS
    地址:https://www.jianshu.com/p/143ddd1d584d
    来源:简书

    生活就是不断的积累 奥力给~

    相关文章

      网友评论

        本文标题:Vue3 setup语法糖解析

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