建站
咨詢
售后
建站咨詢
新聞中心
#mixins
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、鄠邑網(wǎng)絡(luò)推廣、小程序開發(fā)、鄠邑網(wǎng)絡(luò)營(yíng)銷、鄠邑企業(yè)策劃、鄠邑品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鄠邑建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
- 類型：
Array
- 詳細(xì)：
mixins 選項(xiàng)接收一個(gè)混入對(duì)象的數(shù)組。這些混入對(duì)象可以像正常的實(shí)例對(duì)象一樣包含實(shí)例選項(xiàng)，這些選項(xiàng)將會(huì)被合并到最終的選項(xiàng)中，使用特定的選項(xiàng)合并邏輯。例如，如果 mixin 包含一個(gè) created 鉤子，而創(chuàng)建組件本身也有一個(gè)，那么兩個(gè)函數(shù)都會(huì)被調(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- 參考Mixins
#extends
- 類型：
Object | Function
- 詳細(xì)：
允許聲明擴(kuò)展另一個(gè)組件 (可以是一個(gè)簡(jiǎn)單的選項(xiàng)對(duì)象或構(gòu)造函數(shù))。這主要是為了便于擴(kuò)展單文件組件。
這和 mixins 類似。
- 示例：
const CompA = { ... }
// 在沒有調(diào)用 `Vue.extend` 時(shí)候繼承 CompA
const CompB = {
extends: CompA,
...
}#provide / inject
- 類型：
- provide：
Object | () => Object - inject：
Array| { [key: string]: string | Symbol | Object }
- 詳細(xì)：
這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。如果你熟悉 React，這與 React 的 context 特性很相似。
provide 選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的 property。在該對(duì)象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。
inject 選項(xiàng)應(yīng)該是：
- 一個(gè)字符串?dāng)?shù)組，或
- 一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名，value 是：
- 在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，或
- 一個(gè)對(duì)象，該對(duì)象的：
fromproperty 是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)defaultproperty 是降級(jí)情況下使用的 value
提示：提示：
provide和inject綁定并不是響應(yīng)式的。這是刻意為之的。然而，如果你傳入了一個(gè)響應(yīng)式的對(duì)象，那么其對(duì)象的 property 仍是響應(yīng)式的。
- 示例：
// 父級(jí)組件提供 'foo'
const Provider = {
provide: {
foo: 'bar'
}
// ...
}
// 子組件注入 'foo'
const Child = {
inject: ['foo'],
created() {
console.log(this.foo) // => "bar"
}
// ...
} 利用 ES2015 Symbols、函數(shù) provide 和對(duì)象 inject：
const s = Symbol()
const Provider = {
provide() {
return {
[s]: 'foo'
}
}
}
const Child = {
inject: { s }
// ...
}使用一個(gè)注入的值作為一個(gè) property 的默認(rèn)值：
const Child = {
inject: ['foo'],
props: {
bar: {
default() {
return this.foo
}
}
}
}使用一個(gè)注入的值作為數(shù)據(jù)入口：
const Child = {
inject: ['foo'],
data() {
return {
bar: this.foo
}
}
}注入可以通過設(shè)置默認(rèn)值使其變成可選項(xiàng)：
const Child = {
inject: {
foo: { default: 'foo' }
}
} 如果它需要從一個(gè)不同名字的 property 注入，則使用 from 來表示其源 property：
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}與 prop 的默認(rèn)值類似，你需要對(duì)非原始值使用一個(gè)工廠方法：
const Child = {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}- 參考Provide / Inject
#setup
- 類型：
Function
setup 函數(shù)是一個(gè)新的組件選項(xiàng)。它作為在組件內(nèi)部使用組合式 API 的入口點(diǎn)。
- 調(diào)用時(shí)間
在創(chuàng)建組件實(shí)例時(shí)，在初始 prop 解析之后立即調(diào)用 setup。在生命周期方面，它是在 beforeCreate 鉤子之前調(diào)用的。
- 模板使用
如果 setup 返回一個(gè)對(duì)象，則該對(duì)象的屬性將合并到組件模板的渲染上下文中：
{{ count }} {{ object.foo }}
請(qǐng)注意，從 setup 返回的 refs 在模板中訪問時(shí)會(huì)自動(dòng)展開，因此模板中不需要 .value。
- 渲染函數(shù)/JSX 的方法
setup 還可以返回一個(gè)渲染函數(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ù)
該函數(shù)將接收到的 prop 作為其第一個(gè)參數(shù)：
export default {
props: {
name: String
},
setup(props) {
console.log(props.name)
}
} 請(qǐng)注意，此 props 對(duì)象是響應(yīng)式的——即在傳入新的 props 時(shí)會(huì)對(duì)其進(jìn)行更新，并且可以通過使用 watchEffect 或 watch 進(jìn)行觀測(cè)和響應(yīng)：
export default {
props: {
name: String
},
setup(props) {
watchEffect(() => {
console.log(`name is: ` + props.name)
})
}
} 但是，請(qǐng)不要解構(gòu) props 對(duì)象，因?yàn)樗鼤?huì)失去響應(yīng)式：
export default {
props: {
name: String
},
setup({ name }) {
watchEffect(() => {
console.log(`name is: ` + name) // 沒有響應(yīng)式
})
}
} props 對(duì)象在開發(fā)過程中對(duì)于用戶區(qū)代碼是不可變的 (如果用戶代碼嘗試對(duì)其進(jìn)行更改，則會(huì)發(fā)出警告)。
第二個(gè)參數(shù)提供了一個(gè)上下文對(duì)象，該對(duì)象暴露了以前在 this 上暴露的 property 的選擇列表：
const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.emit
}
} attrs 和 slots 是內(nèi)部組件實(shí)例上相應(yīng)值的代理。這樣可以確保它們即使在更新后也始終會(huì)顯示最新值，以便我們可以對(duì)它們進(jìn)行結(jié)構(gòu)分解，而不必?fù)?dān)心訪問老的引用：
const MyComponent = {
setup(props, { attrs }) {
// 稍后可能會(huì)調(diào)用的函數(shù)
function onClick() {
console.log(attrs.foo) // 保證是最新引用
}
}
} 有很多理由將 props 作為單獨(dú)的第一個(gè)參數(shù)而不是將其包含在上下文中：
- 組件使用
props比其他 property 更常見，并且很多情況下組件僅使用props。 - 將
props作為單獨(dú)的參數(shù)可以使單獨(dú)鍵入更容易，而不會(huì)弄亂上下文中其他 property 的類型。這也使得在具有 TSX 支持的setup、render和普通功能組件之間保持一致的簽名成為可能。
- 參考組合式 API
新聞名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0選項(xiàng)組合
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/dpgcoss.html
