|
与setup函数不同的是，在script标签中添加setup
1、变量、方法不需要 return 出来
?????????属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得
<script setup>
import { ref } from 'vue';
<!-- flag变量不需要在 return出去了 -->
let flag = ref("ABCD")
<!-- 函数也可以直接引用,不用在return中返回 -->
let changeHander = ()=>{
flag.value='qwe'
}
</script>
2、组件不需要在注册
????????使用组件，只需要引入组件就可以直接使用，不需要再在components中注册（组件命名采用的是大驼峰）
3、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>
????????子组件接收参数：
<script setup>
import {defineProps} from 'vue'
defineProps({
info:{
type:String,
default:'----'
},
time:{
type:String,
default:'0分钟'
},
})
</script>
4、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>
<h2> 你好 </h2>
<button @click="hander1Click">新增</button>
<button @click="hander2Click">删除</button>
</div>
</template>
<script setup>
import {defineEmits} from 'vue'
// 使用defineEmits创建名称，接收一个数组
let $myemit=defineEmits(['myAdd','myDel'])
let hander1Click = ()=>{
$myemit('myAdd','新增的数据')
}
let hander2Click = ()=>{
$myemit('myDel','删除的数据')
}
</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>中绑定变量，v-bind('变量')
<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>
|