W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
Array<Object>
mixins
選項(xiàng)接收一個混入對象的數(shù)組。這些混入對象可以像正常的實(shí)例對象一樣包含實(shí)例選項(xiàng),這些選項(xiàng)將會被合并到最終的選項(xiàng)中,使用特定的選項(xiàng)合并邏輯。例如,如果 mixin 包含一個 created
鉤子,而創(chuàng)建組件本身也有一個,那么兩個函數(shù)都會被調(diào)用。
Mixin 鉤子按照傳入順序依次調(diào)用,并在調(diào)用組件自身的鉤子之前被調(diào)用。
const mixin = {
created: function() {
console.log(1)
}
}
Vue.createApp({
created() {
console.log(2)
},
mixins: [mixin]
})
// => 1
// => 2
Object | Function
允許聲明擴(kuò)展另一個組件 (可以是一個簡單的選項(xiàng)對象或構(gòu)造函數(shù))。這主要是為了便于擴(kuò)展單文件組件。
這和 mixins
類似。
const CompA = { ... }
// 在沒有調(diào)用 `Vue.extend` 時候繼承 CompA
const CompB = {
extends: CompA,
...
}
Object | () => Object
Array<string> | { [key: string]: string | Symbol | Object }
這對選項(xiàng)需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時間里始終生效。如果你熟悉 React,這與 React 的 context
特性很相似。
provide
選項(xiàng)應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的 property。在該對象中你可以使用 ES2015 Symbols 作為 key,但是只在原生支持 Symbol
和 Reflect.ownKeys
的環(huán)境下可工作。
inject
選項(xiàng)應(yīng)該是:
from
property 是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)default
property 是降級情況下使用的 value提示:提示:
provide
和inject
綁定并不是響應(yīng)式的。這是刻意為之的。然而,如果你傳入了一個響應(yīng)式的對象,那么其對象的 property 仍是響應(yīng)式的。
// 父級組件提供 'foo'
const Provider = {
provide: {
foo: 'bar'
}
// ...
}
// 子組件注入 'foo'
const Child = {
inject: ['foo'],
created() {
console.log(this.foo) // => "bar"
}
// ...
}
利用 ES2015 Symbols、函數(shù) provide
和對象 inject
:
const s = Symbol()
const Provider = {
provide() {
return {
[s]: 'foo'
}
}
}
const Child = {
inject: { s }
// ...
}
使用一個注入的值作為一個 property 的默認(rèn)值:
const Child = {
inject: ['foo'],
props: {
bar: {
default() {
return this.foo
}
}
}
}
使用一個注入的值作為數(shù)據(jù)入口:
const Child = {
inject: ['foo'],
data() {
return {
bar: this.foo
}
}
}
注入可以通過設(shè)置默認(rèn)值使其變成可選項(xiàng):
const Child = {
inject: {
foo: { default: 'foo' }
}
}
如果它需要從一個不同名字的 property 注入,則使用 from
來表示其源 property:
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
與 prop 的默認(rèn)值類似,你需要對非原始值使用一個工廠方法:
const Child = {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}
Function
setup
函數(shù)是一個新的組件選項(xiàng)。它作為在組件內(nèi)部使用組合式 API 的入口點(diǎn)。
在創(chuàng)建組件實(shí)例時,在初始 prop 解析之后立即調(diào)用 setup
。在生命周期方面,它是在 beforeCreate 鉤子之前調(diào)用的。
如果 setup
返回一個對象,則該對象的屬性將合并到組件模板的渲染上下文中:
<template>
<div>{{ count }} {{ object.foo }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
// 暴露到template中
return {
count,
object
}
}
}
</script>
請注意,從 setup
返回的 refs 在模板中訪問時會自動展開,因此模板中不需要 .value
。
setup
還可以返回一個渲染函數(shù),該函數(shù)可以直接使用在同一作用域中聲明的響應(yīng)式狀態(tài):
import { h, ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
return () => h('div', [count.value, object.foo])
}
}
該函數(shù)將接收到的 prop 作為其第一個參數(shù):
export default {
props: {
name: String
},
setup(props) {
console.log(props.name)
}
}
請注意,此 props
對象是響應(yīng)式的——即在傳入新的 props 時會對其進(jìn)行更新,并且可以通過使用 watchEffect
或 watch
進(jìn)行觀測和響應(yīng):
export default {
props: {
name: String
},
setup(props) {
watchEffect(() => {
console.log(`name is: ` + props.name)
})
}
}
但是,請不要解構(gòu) props
對象,因?yàn)樗鼤ロ憫?yīng)式:
export default {
props: {
name: String
},
setup({ name }) {
watchEffect(() => {
console.log(`name is: ` + name) // 沒有響應(yīng)式
})
}
}
props
對象在開發(fā)過程中對于用戶區(qū)代碼是不可變的 (如果用戶代碼嘗試對其進(jìn)行更改,則會發(fā)出警告)。
第二個參數(shù)提供了一個上下文對象,該對象暴露了以前在 this
上暴露的 property 的選擇列表:
const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.emit
}
}
attrs
和 slots
是內(nèi)部組件實(shí)例上相應(yīng)值的代理。這樣可以確保它們即使在更新后也始終會顯示最新值,以便我們可以對它們進(jìn)行結(jié)構(gòu)分解,而不必?fù)?dān)心訪問老的引用:
const MyComponent = {
setup(props, { attrs }) {
// 稍后可能會調(diào)用的函數(shù)
function onClick() {
console.log(attrs.foo) // 保證是最新引用
}
}
}
有很多理由將 props
作為單獨(dú)的第一個參數(shù)而不是將其包含在上下文中:
props
比其他 property 更常見,并且很多情況下組件僅使用 props
。props
作為單獨(dú)的參數(shù)可以使單獨(dú)鍵入更容易,而不會弄亂上下文中其他 property 的類型。這也使得在具有 TSX 支持的 setup
、render
和普通功能組件之間保持一致的簽名成為可能。Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: