亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關(guān)于vue3中setup函數(shù)的使用

 更新時(shí)間：2022年04月23日 09:18:02   作者：黑貓幾絳  
這篇文章主要介紹了關(guān)于vue3中setup函數(shù)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

概述 

一、 初識(shí)setup函數(shù) 

組件中所用到的：數(shù)據(jù)、方法等等均要配置在setup中，這也就意味著在Vue2中寫(xiě)的data、methods在這里都不再推薦使用。

這樣的配置讓對(duì)象式編程趨近于了函數(shù)式編程。

<script>
export default {
  name: 'App',
  // 最為原始的對(duì)象寫(xiě)法是這樣，但是通過(guò)es6我們可以簡(jiǎn)寫(xiě)
  // setup: function(){}
  setup () {
    // 數(shù)據(jù)
    let name = '黑貓幾絳'
    let age = 20
    // 方法
    function sayHello() {
      console.log(`我叫${name}，我今年${age}了`)
    }
  }
}
</script>

了解過(guò)Vue2響應(yīng)式原理的話你可能會(huì)有疑問(wèn)說(shuō)，在這個(gè)地方name和age并不是響應(yīng)式的。

的確如此，在這里我們僅僅是測(cè)試一下setup中是否可以放入數(shù)據(jù)與方法，響應(yīng)式在后面的專(zhuān)欄文章中介紹。

如果此時(shí)未了解響應(yīng)原理，可以看看我以前的一篇文章，這篇文章里有詳細(xì)介紹

二、 關(guān)于setup的返回值

僅僅存放數(shù)據(jù)與方法還不夠，我們需要將他們作為返回值返回出去，在模板中便可以直接使用。

<template>
  <h1>我叫{{name}}，我今年{{age}}了</h1>
</template>
 
<script>
export default {
  name: 'App',
  // 最為原始的對(duì)象寫(xiě)法是這樣，但是通過(guò)es6我們可以簡(jiǎn)寫(xiě)
  // 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 () {
    // 在頁(yè)面上渲染出一個(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>
      摸魚(yú)
    </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)文章

最新評(píng)論