1.动态组件
由于组件被引用为变量而不是作为字符串键来注册的，在<script setup>中要使用动态组件的时候，就应该使用动态的:is来绑定
- 以前单组件用：
is直接绑定注册的字符串，现在:is绑定变量名 2.以前多组件用：:is绑定数组中每一项的字符串，现在:is绑定对象中属性对应组件变量
<template>
<Tabs v-model:active="active">
<Tab title="优惠券" name="couponTab" />
<Tab title="拼团" name="groupingTab" />
</Tabs>
<component :is="tabValue[active]" />
或者
<component :is="couponTab" />
</template>
<script setup lang="ts" name="Marketing">
import couponTab from "./coupon/index.vue";
import groupingTab from "./grouping/index.vue";
const tabValue = { couponTab, groupingTab };
let active = ref<string>("couponTab");
</script>
2.defineProps 组件传参
父组件传参：
<template>
<div class="home">
<test-com :info="msg" time="42分钟"></test-com>
</div>
</template>
<script setup>
import TestCom from "../components/TestCom.vue"
let msg='消息'
</script>
子组件接收参数：
<template>
<div>{{ info }}</div>
</template>
<script setup>
//defineProps是不需要导入的
//import {defineProps} from 'vue'
const props = defineProps({
info:{
type:String,
default:'我是默认值'
},
time:{
type:Number,
default:20
},
})
const { time } = props;
</script>
3.defineEmits 组件抛出事件
父组件：
<template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
</div>
</template>
<script setup>
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess)=>{
console.log('新增==>',mess);
}
let myDelHander=(mess)=>{
console.log('删除==>', mess);
}
</script>
子组件：
<template>
<div>
<button @click="hander1Click">新增</button>
<button @click="hander2Click">删除</button>
</div>
</template>
<script setup>
//defineEmits是不需要导入的
//import {defineEmits} from 'vue'
// 使用defineEmits创建名称，接收一个数组(注册父级回调事件 --> myAdd、myDel)
let myemit=defineEmits(['myAdd','myDel'])
let hander1Click = ()=>{
myemit('myAdd','新增的数据')
}
let hander2Click = ()=>{
myemit('myDel','删除的数据')
}
</script>
4.await的支持
setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup
<script setup>
import Api from '../api/Api'
const data = await Api.getData()
console.log(data)
</script>
5.defineExpose获取子组件中的属性值
子组件：
<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
like:'喜欢李',
age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
sex,
info
})
</script>
父组件：
<template>
<div class="home">
<test-com ref="testcomRef"></test-com>
<button @click="getSonHander">获取子组件中的数据</button>
</div>
</template>
<script 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>
6.style v-bind（我们可以在style中去使用变量）
style v-bind将span变成红色
<template>
<span> 有开始循环了-开端 </span>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
color: 'red'
})
</script>
<style scoped>
span {
/* 使用v-bind绑定state中的变量 */
color: v-bind('state.color');
}
</style>
复制代码
7.watch的使用
<script setup>
import {
reactive,
watch,
} from 'vue'
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变了',newValue,oldValue)
},{immediate:true})
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{deep:true})
</script>
8、computed计算属性的使用
<script setup>
import {
reactive,
computed,
} from 'vue'
//数据
let person = reactive({
firstName:'小',
lastName:'叮当'
})
// 计算属性简写
person.fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
// 完整写法
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
</script>
