標(biāo)簽的 ref 屬性
- 用在普通
DOM標(biāo)簽上，獲取的是DOM節(jié)點。- 用在組件標(biāo)簽上，獲取的是組件實例對象。
- 用在普通
DOM標(biāo)簽上：
<template>
<div class="person">
<h3 ref="title">Vue</h3>
<button @click="showLog">點我打印</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref} from 'vue'
let title = ref()
function showLog(){
// 通過id獲取元素
const t1 = document.getElementById('title')
// 打印內(nèi)容
console.log(t1?.innerText) //獲取的是`DOM`節(jié)點。
// 通過ref獲取元素
console.log(title.value)
}
</script>
- 用在組件標(biāo)簽上：
- 父組件App使用子組件Person
- Person組件標(biāo)簽上使用ref 可以獲取組件實例
- 但需要子組件代碼中 使用defineExpose暴露內(nèi)容
<!-- 父組件App.vue -->
<template>
<Person ref="ren"/>
<button @click="test">測試</button>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {ref} from 'vue'
let ren = ref()
function test(){
console.log(ren.value.name)
console.log(ren.value.age)
}
</script>
<!-- 子組件Person.vue中要使用defineExpose暴露內(nèi)容 -->
<script lang="ts" setup name="Person">
import {ref,defineExpose} from 'vue'
// 數(shù)據(jù)
let name = ref('張三')
let age = ref(18)
// 使用defineExpose將組件中的數(shù)據(jù)交給外部
defineExpose({name,age})
</script>
props
- App.vue是父組件，Person是子組件
- 父組件中 使用子組件 < Person :list=“persons” /> 。并給子組件傳送list值
- 父中定義了發(fā)送對象格式 子中也可定義接受格式
- 詳見下方代碼
新建文件type.ts定義接口
// 定義一個接口，限制每個Person對象的格式
export interface PersonInter {
id:string,
name:string,
age:number
}
// 定義一個自定義類型Persons
export type Persons = Array<PersonInter>
App.vue 中
<template>
<Person :list="persons"/>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'
import {type Persons} from './types'
let persons = reactive<Persons>([ //Persons類型的數(shù)據(jù) <>是數(shù)組
{id:'e98219e12',name:'張三',age:18},
{id:'e98219e13',name:'李四',age:19},
{id:'e98219e14',name:'王五',age:20}
])
</script>
Person.vue中：
<template>
<div class="person">
<ul>
<li v-for="item in list" :key="item.id">
{{item.name}}--{{item.age}}
</li>
</ul>
</div>
</template>
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type Persons} from '@/types'
// 第一種寫法：僅接收
// const props = defineProps(['list'])
// 第二種寫法：接收+限制類型
// defineProps<{list:Persons}>()
// 第三種寫法：接收+限制類型+指定默認(rèn)值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:'asdasg01',name:'小豬佩奇',age:18}]
})
console.log(props)
</script>
生命周期
Vue3的生命周期
創(chuàng)建階段：
setup掛載階段：
onBeforeMount、onMounted更新階段：
onBeforeUpdate、onUpdated卸載階段：
onBeforeUnmount、onUnmounted
常用的鉤子：onMounted(掛載完畢)、onUpdated(更新完畢)、onBeforeUnmount(卸載之前)
自定義hook
-
hook—— 本質(zhì)是一個函數(shù)，把setup函數(shù)中使用的Composition API進(jìn)行了封裝 -
自定義
hook的優(yōu)勢：復(fù)用代碼, 讓setup中的邏輯更清楚易懂。
useSum.ts中內(nèi)容如下：
import {ref,onMounted} from 'vue'
export default function(){
let sum = ref(0)
const increment = ()=>{
sum.value += 1
}
//向外部暴露數(shù)據(jù)
return {sum,increment}
}
-useDog.ts中內(nèi)容如下：
import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'
export default function(){
let dogList = reactive<string[]>([])
// 方法
async function getDog(){
// 發(fā)請求
let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
// 維護(hù)數(shù)據(jù)
dogList.push(data.message)
}
//向外部暴露數(shù)據(jù)
return {dogList,getDog}
}
-組件中具體使用：文章來源：http://www.zghlxwxcb.cn/news/detail-811732.html
<template>
<h2>當(dāng)前求和為：{{sum}}</h2>
<button @click="increment">點我+1</button>
<hr>
<img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)">
<span v-show="dogList.isLoading">加載中......</span><br>
<button @click="getDog">再來一只狗</button>
</template>
<script setup lang="ts">
import useSum from './hooks/useSum' // 引入hook
import useDog from './hooks/useDog'
let {sum,increment,decrement} = useSum() //直接調(diào)用
let {dogList,getDog} = useDog()
</script>
總結(jié)
下一篇將會更新vue3.0核心語法最后篇章 — 路由部分?。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-811732.html
到了這里，關(guān)于[GN] Vue3.2 快速上手 ---- 核心語法2的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
