日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
// 導(dǎo)入 useContext 組件  
  
  
  
  
import { useContext } from "vue";  
  
  
  
  
// 獲取 context  
  
  
  
  
const ctx = useContext(); 
 
 
 
 

 
 
 
 

  
  
  
  
// 導(dǎo)入 useAttrs 組件  
  
  
  
  
import { useAttrs } from "vue"; 
  
  
  
  
// 獲取 attrs  
  
  
  
  
const attrs = useAttrs();  
  
  
  
  
// attrs是個對象，和 props 一樣，需要通過 key 來得到對應(yīng)的單個 attr  
  
  
  
  
console.log(attrs.msg); 
 
 
 
 

 
 
 
 

  
  
  
  
import { defineComponent, useSlots } from "vue";  
  
  
  
  
const ChildTSX = defineComponent({  
  
  
  
  
  setup() {  
  
  
  
  
    // 獲取插槽數(shù)據(jù)  
  
  
  
  
    const slots = useSlots();  
  
  
  
  
    // 渲染組件  
  
  
  
  
    return () => (  
  
  
  
  
      
  
  
  
  
  
        // 渲染默認(rèn)插槽  
  
  
  
  
        
{slots.default ? slots.default() : ""}
  
  
  
  
  
        // 渲染命名插槽  
  
  
  
  
        
{slots.msg ? slots.msg() : ""}
  
  
  
  
  
      

新增 defineExpose API

在標(biāo)準(zhǔn)組件寫法里，子組件的數(shù)據(jù)都是默認(rèn)隱式暴露給父組件的，但在 script-setup 模式下，所有數(shù)據(jù)只是默認(rèn) return 給 template 使用，不會暴露到組件外，所以父組件是無法直接通過掛載 ref 變量獲取子組件的數(shù)據(jù)。如果要調(diào)用子組件的數(shù)據(jù)，需要先在子組件顯示的暴露出來，才能夠正確的拿到，這個操作，就是由 expose 來完成。expose 也是 context 的一個組件成員，原來的用法，是從 useContext 里導(dǎo)出： 

 
 
 
 

  
  
  
  
// 導(dǎo)入 useContext 組件  
  
  
  
  
import { useContext } from "vue";  
  
  
  
  
// 啟用expose組件  
  
  
  
  
const { expose } = useContext();  
  
  
  
  
// 定義一個想提供給父組件拿到的數(shù)據(jù)  
  
  
  
  
const msg: string = "Hello World!";  
  
  
  
  
// 顯示暴露的數(shù)據(jù)，才可以在父組件拿到  
  
  
  
  
expose({  
  
  
  
  
  msg,  
  
  
  
  
}); 
 
 
 
 

由于 useContext 會在未來版本里移除，所以新增了 defineExpose API 來實(shí)現(xiàn) expose 的功能。新的 API 用法： 

 
 
 
 

  
  
  
  
// 導(dǎo)入 defineExpose 組件  
  
  
  
  
import { defineExpose } from "vue";  
  
  
  
  
// 定義數(shù)據(jù)  
  
  
  
  
const msg: string = "Hello World!";  
  
  
  
  
// 暴露給父組件  
  
  
  
  
defineExpose({  
  
  
  
  
  msg,  
  
  
  
  
}); 
 
 
 
 

父組件就可以通過 ref API 去拿到子組件暴露出來的 msg 數(shù)據(jù)了。

改名 defineEmits API

使用 defineEmits 取待原來的 defineEmit API ，也就是改名了。好吧，我之前的文章還特地強(qiáng)調(diào)了 defineProps 是復(fù)數(shù)結(jié)尾，帶有 s，而 defineEmit 沒有，如今，都統(tǒng)一了，都是復(fù)數(shù)形式。從尤大的更新說明里看，大約只是一個 typo 更新，對比原來的 defineEmit ，目的是使用新的 defineEmits 與標(biāo)準(zhǔn)組件的 emits 命名上更為接近，和 defineProps 也更統(tǒng)一。╮(╯▽╰)╭ 所以用法方面和原來是沒什么區(qū)別的： 

 
 
 
 

  
  
  
  
// 導(dǎo)入 defineEmits 組件  
  
  
  
  
import { defineEmits } from "vue";  
  
  
  
  
// 獲取 emit  
  
  
  
  
const emit = defineEmits(["say-hi", "chang-name"]);  
  
  
  
  
// 調(diào)用 emit 打招呼  
  
  
  
  
emit("say-hi", "Hello!");  
  
  
  
  
// 調(diào)用 emit 改名  
  
  
  
  
emit("chang-name", "Tom"); 
 
 
 
 

新增 withDefaults API

說完 emits，經(jīng)常與之同時出現(xiàn)的 props 也有一些變化，本次是帶來了一個全新的 withDefaults API，用于輔助 defineProps 來指定 prop 的默認(rèn)值。在以前的文章我有提及到，當(dāng)你用 TypeScript 編程時，defineProps 有兩種類型指定方式：

    1.  通過構(gòu)造函數(shù)進(jìn)行檢查（傳統(tǒng)方法）

第一種方式是使用 JavaScript 原生構(gòu)造函數(shù)進(jìn)行類型規(guī)定，使用這種方法時，如果你要限制 props 的類型和默認(rèn)值，需要通過一個 “對象” 入?yún)韨鬟f給 defineProps，比如： 

 
 
 
 

  
  
  
  
// 導(dǎo)入 defineProps 組件  
  
  
  
  
import { defineProps } from "vue"; 
  
  
  
  
 // 定義 props  
  
  
  
  
defineProps({  
  
  
  
  
  name: {  
  
  
  
  
    type: String,  
  
  
  
  
    required: false,  
  
  
  
  
    default: "Petter",  
  
  
  
  
  },  
  
  
  
  
  userInfo: Object,  
  
  
  
  
  tags: Array,  
  
  
  
  
}); 
 
 
 
 

    1.  使用類型注解進(jìn)行檢查（TS 專屬）

第二種方式是按照 TS 的書寫習(xí)慣來定義數(shù)據(jù)類型，這種情況下需要遵循 TypeScript 的類型規(guī)范，比如字符串是 string，而不是 String。 

 
 
 
 

  
  
  
  
// 導(dǎo)入 defineProps 組件  
  
  
  
  
import { defineProps } from "vue";  
  
  
  
  
// 對象類型接口  
  
  
  
  
interface UserInfo {  
  
  
  
  
  id: number;  
  
  
  
  
  age: number;  
  
  
  
  
}  
  
  
  
  
// 定義 props  
  
  
  
  
defineProps<{  
  
  
  
  
  name: string;  
  
  
  
  
  phoneNumber: number;  
  
  
  
  
  userInfo: UserInfo;  
  
  
  
  
  tags: string[];  
  
  
  
  
}>();import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults(  
  
  
  
  
  defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
);  
  
  
  
  
import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults( 
  
  
  
  
   defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
); 
 
 
 
 

在此之前，使用第二種方法，是無法指定默認(rèn)值的（在當(dāng)時的 RFC 的文檔里也有說明無法指定）。如今，這個新的 withDefaults API 可以讓你在使用 TS 類型系統(tǒng)時，也可以指定 props 的默認(rèn)值。它接收兩個入?yún)ⅲ?/p>

可能缺乏一些官方描述，還是看參考用法可能更直觀： 

 
 
 
 

  
  
  
  
import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults(  
  
  
  
  
  defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
); 
 
 
 
 

頂級 await 的支持

不必再配合 async 就可以直接使用 await 了，這種情況下，組件的 setup 會自動變成 async setup 。 

它轉(zhuǎn)換成標(biāo)準(zhǔn)組件的寫法就是： 

參考資料

以上所有的資料都來自于尤大在 PR 227 的評論通告……傳送門：script setup by yyx990803 · Pull Request #227 · vuejs/rfcsgithub.com[3]好隱蔽的說，而且原來的 RFC 倉庫的文檔也刪除了，換了新的文檔也是找了好久才翻到新的，本文先根據(jù)尤大的通告做一波簡單的說明，文章首發(fā)在博客，只同步在知乎。Vue3.0 最新動態(tài)：script-setup 定稿 部分實(shí)驗(yàn)性 API 將棄用 - 程沛權(quán) - 養(yǎng)了三只貓 chengpeiquan.com[4]后續(xù)將會詳細(xì)更新到 Vue3.0 學(xué)習(xí)教程與實(shí)戰(zhàn)案例[5] 里。