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>