vue 3.2 中的setup 语法糖

setup的简单介绍

起初在vue3.0 的时候 暴露变量必须return出来 template中才能使用，这样就会导致在页面上变量会出现很多次

在vue3.2 中只需在javascript标签中添加setup 就可以完美解决这种问题

组件引入也不需要注册，属性和方法也不用返回，也不用写setup函数，也不用写export default，甚至自定义指令也可以在我们的template中使用

setup的一些特殊属性

子组件如何接受父组件的参数

defindProps

//父组件传递参数
<template>
    <div>
        <son :msg="msg" time="40分钟" />
    </div>
</template>
<script setup>
    let msg="我是从父组件传递过来的值"
</script>


//子组件接受参数
<tempalte>
    <div>{{msg}}</div>
    <div>时间：{{time}}</div>
</template>
<script setup>
    import {defineProps} from "vue"
     defineProps({
        info:{
            type:String,
            default:'默认子组件的值'
        },
        time:Sting
    })
</script>

子组件如何想父组件抛出事件

defineEmits 

//子组件的使用 defineEmits 可以想父组件抛出事件  相当于$emit
<template>
    <div>
        <h2>我是子组件</h2>
        <button @click="add">新增</button>
        <button @click="relove>删除</button>
    </div>
</template>
<script setup>
    import {defineEmits} from "vue"
    let $myemit = defineEmits(["myAdd","myReslove"])
    let add = () => {
        $myemit("myAdd","新增的值")
    }
    let reslove = () => {
        $myemit("myReslove","删除的值")
    }
</script>

// 父组件
<template>
    <div>
       <son @myAdd="myAdd" @myReslove="myReslove"/>
    </div>
</template>
<script setup>
    let myAdd= (mess) => {
        console.log("新增",mess)
    }
    let myReslove= (mess) => {
        console.log("删除",mess)
    }
</script>

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

defineExpose  将组件暴露出去 父组件可以获得

//子组件
<template>
    <div>
        <h2>信息，你好我是yf</h2>
        <h2>性别：{{sex}}</h2>
        <h2>其他信息：{{info}}</h2>
    </div>
</template>
<script setup>
    import {ref,reactive,defineExpose} from "vue"
    let sex = ref("男")
    let info = reactive({
        like:"我喜欢你",
        age:21
    })
//defineExpose 将组件中的属性暴露出去，父组件可以获取
    defineExpose({
        sex,
        info
    })
</script>

// 父组件
<template>
    <div>
        <son ref="son" />
        <button @click="fatherGet">点击获取子组件的属性值</button>
    </div>
</template>
<script setup>
    let fatherGet () => {
    console.log(son.value.info)
    console.log(son.value.sex)
}
</script>

新增指令 v-meno  

v-meno 接受一个固定长度的数组作为依赖进行记忆树

如果数组中的值 个上次渲染的时候值是一样的，则会被跳过更新，相当于数组优化，缓存了一部分数据

// v-meno 使用较少 缓存了一部分数据  可以进行优化
<li v-for="{item,index} in listArr" :key="index" V-meno="['valueA','valueB']">
    {{item.name}}
</li>

style中也可以使用v-bind

<template>
    <div>
        <span>yf</span>
    </div>
</template>
<script setup>
    import {reactive} from 'vue'
    const state = reactive({
        color : "red"
    })
</script>
<style scoped>
    span{
        /*使用v-bind 绑定style中的样式*/
        color : v-bind('state.color')
    }
</style>