關(guān)于setup基礎(chǔ)用法可看vue3基礎(chǔ)
一淀衣、通過(guò)ref獲取元素實(shí)例
- 父組件
<template>
<ref-test ref="testRef" />
</template>
<script>
import { ref, watch, computed, nextTick } from 'vue'
setup() {
const testRef = ref(null)
testRef.value.handle()
return { testRef}
}
</script>
- 子組件
常規(guī)用法
<script>
export default {
setup() {
const handle = () => {
console.log(11)
}
return { handle}
}
}
</script>
setup語(yǔ)法糖用法
<script setup lang="ts">
import { defineExpose } from 'vue'
const handle = () => {
console.log(11)
}
// 將方法或數(shù)據(jù)暴露出去
defineExpose({ handle })
</script>
二歌懒、$nextTick使用
在vue中直接引入使用
import { ref, watch, computed, nextTick } from 'vue'
nextTick(() => {})
三断楷、props傳值
- 父組件
<ref-test :propsTest="1234" />
- 子組件
常規(guī)用法
<script>
export default {
props: { propsTest: Number },
setup(props) {
//父組件傳過(guò)來(lái)的值
console.log(props.propsTest) }
}
</script>
setup語(yǔ)法糖用法
<script setup>
// defineProps 不需要引入，它們將自動(dòng)地在 <script setup> 中可用
const props = defineProps({
propsTest: Number
})
console.log(props.propsTest)
</script>
四甜滨、emit向上傳遞
- 父組件
<ref-test @updateEmit="updateEmit($event)" />
<script>
setup() {
const updateEmit = (value) => {
console.log( value )
}
return { updateEmit }
}
</script>
- 子組件
常規(guī)用法
<div @click="testEmit()">點(diǎn)我</div>
<script>
export default {
setup(props, { emit }) {
// emit向上傳遞
const testEmit = () => {
emit('updateEmit', 2112)
}
return { testEmit }
}
}
setup語(yǔ)法糖用法
<div @click="testEmit()">點(diǎn)我</div>
<script setup lang="ts">
// defineEmits 不需要引入纯陨，它們將自動(dòng)地在 <script setup> 中可用
// emit向上傳遞
const emit = defineEmits(['updateEmit'])
const testEmit = () => {
emit('updateEmit', 2112)
}
</script>
五、獲取router
<script lang="ts">
import { useRouter } from 'vue-router'
setup() {
const $router = useRouter()
console.log($router.currentRoute)
</script>
}
六崩掘、計(jì)算屬性
用法比較常規(guī)
import { watch, computed} from 'vue'
setup() {
const comp = ref(0)
const count = ref(1)
// 計(jì)算屬性
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value, 90)
// 監(jiān)聽(tīng)
watch(comp, (newV, oldV) => {
console.log(newV, oldV, 88)
})
}
七、數(shù)據(jù)監(jiān)聽(tīng)
1少办、監(jiān)聽(tīng)ref的值
const num= ref("")
watch(num, (newV, oldV) => {
console.log(newV, oldV, 88);
});
2苞慢、監(jiān)聽(tīng)reactive的值
const obj= reactive({
str: "",
})
watch(() => obj.str, (newV, oldV) => {});
原因：vue無(wú)法監(jiān)聽(tīng)對(duì)象內(nèi)部的值，需要將值return出去監(jiān)聽(tīng)
3英妓、監(jiān)聽(tīng)多個(gè)值
// 監(jiān)聽(tīng)num挽放，和str的值
watch([num,() => obj.str], (newV, oldV) => {
console.log(newV[0],newV[1])
console.log(oldV[0],oldV[1])
});
