關(guān)于vue3中setup函數(shù)的使用
概述
一、 初識(shí)setup函數(shù)
組件中所用到的：數(shù)據(jù)、方法等等均要配置在setup中，這也就意味著在Vue2中寫的data、methods在這里都不再推薦使用。
這樣的配置讓對(duì)象式編程趨近于了函數(shù)式編程。
<script>
export default {
name: 'App',
// 最為原始的對(duì)象寫法是這樣，但是通過es6我們可以簡(jiǎn)寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
}
}
</script>了解過Vue2響應(yīng)式原理的話你可能會(huì)有疑問說，在這個(gè)地方name和age并不是響應(yīng)式的。
的確如此，在這里我們僅僅是測(cè)試一下setup中是否可以放入數(shù)據(jù)與方法，響應(yīng)式在后面的專欄文章中介紹。
如果此時(shí)未了解響應(yīng)原理，可以看看我以前的一篇文章，這篇文章里有詳細(xì)介紹
二、 關(guān)于setup的返回值
僅僅存放數(shù)據(jù)與方法還不夠，我們需要將他們作為返回值返回出去，在模板中便可以直接使用。
<template>
<h1>我叫{{name}}，我今年{{age}}了</h1>
</template>
<script>
export default {
name: 'App',
// 最為原始的對(duì)象寫法是這樣，但是通過es6我們可以簡(jiǎn)寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
return{
name,
age,
sayHello
}
}
}
</script>在概述里面還介紹了setup的另外一種返回值，即返回一個(gè)渲染函數(shù)，這個(gè)函數(shù)的方法有一點(diǎn)像React.creatElement，可以自定義渲染的內(nèi)容。
<script>
import {h} from 'vue'
export default {
name: 'App',
setup () {
// 在頁面上渲染出一個(gè)h1標(biāo)簽
return ()=> h('h1', '黑貓幾絳')
}
}
</script>三、 關(guān)于setup的參數(shù)
# App.vue
<template>
<Demo msg="hello" name="world" @hello="changeId">
<template v-slot:test>
摸魚
</template>
</Demo>
</template># Demo.vue
<script>
export default {
name:'Demo',
props:['msg'],
setup(props,context){
console.log(props);
console.log(context.attrs);
console.log(context.slots);
console.log(context.emit);
}
}
</script>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個(gè) js 對(duì)象,包含我們組件script中的任意功能選項(xiàng),下面就跟隨小編一起來看看它的具體使用吧2024-03-03
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理
這篇文章主要介紹了如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue中slot-scope的深入理解（適合初學(xué)者）
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個(gè)教程非常適合初學(xué)者,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
基于VUE實(shí)現(xiàn)簡(jiǎn)單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
詳解使用jest對(duì)vue項(xiàng)目進(jìn)行單元測(cè)試
這篇文章主要介紹了詳解使用jest對(duì)vue項(xiàng)目進(jìn)行單元測(cè)試，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無效問題的解決
這篇文章主要介紹了vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點(diǎn)擊事件的項(xiàng)不能包含在這個(gè)類名里面，不然會(huì)無法觸發(fā)點(diǎn)擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例
本文主要介紹了Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12