Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 367
Star 3
Fork 8
H
hello-uvue
提交 200031dd 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat: mixins

上级 0dc46350
隐藏空白更改
内联 并排
Showing with 1743 addition and 31 deletion
App.uvue
浏览文件 @ 200031dd
......@@ -67,6 +67,7 @@ export default {
</script>
<style>
@import "./common/uni.css";
/* @font-face {
font-family: uniicons;
font-weight: normal;
......
common/uni.css 0 → 100644
浏览文件 @ 200031dd
.uni-common-mt {
margin-top: 30rpx;
}
.bold {
font-weight: bold;
}
main.uts
浏览文件 @ 200031dd
import App from './App.uvue'
import { createSSRApp } from 'vue'
import GlobalMixinComp1 from '@/pages/composition/mixins/components/GlobalMixinComp1.uvue'
import GlobalChildMixinComp1 from '@/pages/composition/mixins/components/GlobalChildMixinComp1.uvue'
import GlobalMixinComp2 from '@/pages/composition/mixins/components/GlobalMixinComp2.uvue'
import GlobalChildMixinComp2 from '@/pages/composition/mixins/components/GlobalChildMixinComp2.uvue'
import MixinCompForGlobalMixin from '@/pages/composition/mixins/components/MixinCompForGlobalMixin.uvue'
import MixinCompForGlobalChildMixin from '@/pages/composition/mixins/components/MixinCompForGlobalChildMixin.uvue'
export function createApp() {
const app = createSSRApp(App)
// #ifdef APP-ANDROID
const globalChildMixin = defineMixin({
components: { GlobalChildMixinComp1, MixinComp: MixinCompForGlobalChildMixin },
props: {
globalChildMixinProp1: {
type: String,
default: '通过 defineMixin 定义全局 child mixin props'
},
namesakeChildMixinProp: {
type: String,
default: '通过 defineMixin 定义全局同名 child mixin props'
}
},
data() {
return {
namesakeChildMixinDataMsg: '通过 defineMixin 定义全局同名 child mixin data',
globalChildMixinDataMsg1: '通过 defineMixin 定义全局 child mixin data',
globalChildMixinOnloadMsg1: '',
globalChildMixinOnloadTime1: 0,
globalChildMixinWatchMsg1: '',
}
},
computed: {
globalChildMixinComputed1(): string {
const res = `通过 defineMixin 定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg1: ${this.globalChildMixinOnloadMsg1}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过 defineMixin 定义全局同名 child mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.globalChildMixinWatchMsg1 = `通过 defineMixin 定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.globalChildMixinWatchMsg1)
},
},
emits: ['globalChildMixinEmit1'],
onLoad() {
this.globalChildMixinOnloadTime1 = Date.now()
const res = '通过 defineMixin 定义全局 child mixin onLoad'
console.log(res)
this.globalChildMixinOnloadMsg1 = res
},
methods: {
globalChildMixinMethod1(): string {
const res = '通过 defineMixin 定义全局 child mixin method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '通过 defineMixin 定义全局同名 child mixin method'
console.log(res)
return res
},
}
})
const globalMixin = defineMixin({
mixins: [globalChildMixin],
components: { GlobalMixinComp1, MixinComp: MixinCompForGlobalMixin },
props: {
globalMixinProp1: {
type: String,
default: '通过 defineMixin 定义全局 mixin props'
},
namesakeMixinProp: {
type: String,
default: '通过 defineMixin 定义全局同名 mixin props'
}
},
data() {
return {
globalMixinDataMsg1: '通过 defineMixin 定义全局 mixin data',
namesakeMixinDataMsg: '通过 defineMixin 定义全局同名 mixin data',
globalMixinOnloadMsg1: '',
globalMixinOnloadTime1: 0,
globalMixinWatchMsg1: ''
}
},
computed: {
globalMixinComputed1(): string {
const res = `通过 defineMixin 定义全局 mixin computed, 更新后的 globalMixinOnloadMsg1: ${this.globalMixinOnloadMsg1}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过 defineMixin 定义全局同名 mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.globalMixinWatchMsg1 = `通过 defineMixin 定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.globalMixinWatchMsg1)
},
},
emits: ['globalMixinEmit1'],
onLoad() {
this.globalMixinOnloadTime1 = Date.now()
const res = '通过 defineMixin 定义全局 mixin onLoad'
console.log(res)
this.globalMixinOnloadMsg1 = res
},
methods: {
globalMixinMethod1(): string {
const res = '通过 defineMixin 定义全局 mixin method'
console.log(res)
return res
},
namesakeMixinMethod1(): string {
const res = '通过 defineMixin 定义全局同名 mixin method'
console.log(res)
return res
}
}
})
app.mixin({
mixins: [{
components: { GlobalChildMixinComp2 },
props: {
globalChildMixinProp2: {
type: String,
default: '通过字面量定义全局 child mixin props'
},
namesakeChildMixinProp: {
type: String,
default: '通过字面量定义全局同名 child mixin props'
}
},
data() {
return {
namesakeChildMixinDataMsg: '通过字面量定义全局同名 child mixin data',
globalChildMixinDataMsg2: '通过字面量定义全局 child mixin data',
globalChildMixinOnloadMsg2: '',
globalChildMixinOnloadTime2: 0,
globalChildMixinWatchMsg2: ''
}
},
computed: {
globalChildMixinComputed2(): string {
const res = `通过字面量定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg2: ${this.globalChildMixinOnloadMsg2}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过定义全局同名 child mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.globalChildMixinWatchMsg2 = `通过字面量定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.globalChildMixinWatchMsg2)
},
},
emits: ['globalChildMixinEmit2'],
onLoad() {
this.globalChildMixinOnloadTime2 = Date.now()
const res = '通过字面量定义全局 child mixin onLoad'
console.log(res)
this.globalChildMixinOnloadMsg2 = res
},
methods: {
globalChildMixinMethod2(): string {
const res = '通过字面量定义全局 child mixin method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '通过字面量定义全局同名 child mixin method'
console.log(res)
return res
},
}
}],
components: { GlobalMixinComp2 },
props: {
globalMixinProp2: {
type: String,
default: '通过字面量定义全局 mixin props'
},
namesakeMixinProp: {
type: String,
default: '通过字面量定义全局同名 mixin props'
}
},
data() {
return {
globalMixinDataMsg2: '通过字面量定义全局 mixin data',
namesakeMixinDataMsg: '通过字面量定义全局同名 mixin data',
globalMixinOnloadMsg2: '',
globalMixinOnloadTime2: 0,
globalMixinWatchMsg2: ''
}
},
computed: {
globalMixinComputed2(): string {
const res = `通过字面量定义全局 mixin computed, 更新后的 globalMixinOnloadMsg2: ${this.globalMixinOnloadMsg2}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过字面量定义全局同名 mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.globalMixinWatchMsg2 = `通过字面量定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.globalMixinWatchMsg2)
},
},
emits: ['globalMixinEmit2'],
onLoad() {
this.globalMixinOnloadTime2 = Date.now()
const res = '通过字面量定义全局 mixin onLoad'
console.log(res)
this.globalMixinOnloadMsg2 = res
},
methods: {
globalMixinMethod2(): string {
const res = '通过字面量定义全局 mixin method'
console.log(res)
return res
},
namesakeMixinMethod(): string {
const res = '通过字面量定义全局同名 mixin method'
console.log(res)
return res
}
}
})
app.mixin(globalMixin)
// #endif
return {
app
......
pages.json
浏览文件 @ 200031dd
......@@ -284,19 +284,31 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/unrecognized-component/unrecognized-component",
"style": {
"navigationBarTitleText": "unrecognized-component",
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/component/component",
"style": {
"navigationBarTitleText": "component"
}
},
{
"path": "pages/rendering/unrecognized-component/unrecognized-component",
"style": {
"navigationBarTitleText": "unrecognized-component",
"enablePullDownRefresh": false
}
},
{
"path": "pages/rendering/component/component",
"style": {
"navigationBarTitleText": "component"
}
},
{
"path": "pages/composition/mixins/mixins",
"style": {
"navigationBarTitleText": "mixins"
}
},
{
"path": "pages/composition/mixins/mixins-page2",
"style": {
"navigationBarTitleText": "mixins-page-2"
}
},
{
"path": "pages/examples/nested-component-communication/nested-component-communication",
"style": {
......@@ -338,4 +350,4 @@
}
]
}
}
\ No newline at end of file
}
pages/composition/mixins/components/ChildMixinComp1.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt child-mixin-component-1">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'child mixin component 1'
}
}
}
</script>
pages/composition/mixins/components/ChildMixinComp2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt child-mixin-component-2">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'child mixin component 2'
}
}
}
</script>
pages/composition/mixins/components/Comp1.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<view class="uni-common-mt" ref="mixin-comp-root">
<text class="bold">Comp1:</text>
<text class="uni-common-mt"
>inheritAttrs: false, rootElementTitle should be null</text
>
<text class="uni-common-mt root-element-title-1">rootElementTitle: {{ rootElementTitle }}</text>
<text class="uni-common-mt bold">trigger emitter:</text>
<button class="uni-common-mt global-mixin-emit-1" @click="triggerEmitter('globalMixinEmit1')">
trigger globalMixinEmit1
</button>
<button
class="uni-common-mt global-child-mixin-emit-1"
@click="triggerEmitter('globalChildMixinEmit1')">
trigger globalChildMixinEmit1
</button>
<button class="uni-common-mt global-mixin-emit-2" @click="triggerEmitter('globalMixinEmit2')">
trigger globalMixinEmit2
</button>
<button
class="uni-common-mt global-child-mixin-emit-2"
@click="triggerEmitter('globalChildMixinEmit2')">
trigger globalChildMixinEmit2
</button>
<button class="uni-common-mt mixin-emit" @click="triggerEmitter('mixinEmit')">
trigger mixinEmit
</button>
<button class="uni-common-mt child-mixin-emit" @click="triggerEmitter('childMixinEmit')">
trigger childMixinEmit
</button>
<MixinComp />
</view>
</template>
<script lang="uts">
export default {
mixins:[{
mixins: [{
emits: ['childMixinEmit']
}],
inheritAttrs: false,
emits:['mixinEmit']
}],
data(){
return {
rootElementTitle: '' as string | null
}
},
mounted(){
const rootElement = this.$refs['mixin-comp-root'] as Element
this.rootElementTitle = rootElement.getAttribute('title')
},
methods: {
triggerEmitter(emit: string){
this.$emit(emit, emit)
},
}
}
</script>
pages/composition/mixins/components/Comp2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<view class="uni-common-mt" ref="mixin-comp-root">
<text class="bold">Comp2:</text>
<text class="uni-common-mt"
>inheritAttrs: true, rootElementTitle should not be null</text
>
<text class="uni-common-mt root-element-title-2"
>rootElementTitle: {{ rootElementTitle }}</text
>
<text class="uni-common-mt">{{ namesakeMixinProp }}</text>
<text class="uni-common-mt">{{ namesakeMixinDataMsg }}</text>
<text class="uni-common-mt">{{ namesakeMixinComputed }}</text>
<text class="uni-common-mt mixin-watch-msg">{{ mixinWatchMsg }}</text>
<text class="uni-common-mt">{{ namesakeMixinMethod() }}</text>
<button class="uni-common-mt" @click="changeGlobalMixinOnloadMsg1">
change globalMixinOnloadMsg1
</button>
<MixinComp />
</view>
</template>
<script lang="uts">
import CompForComp from './CompForComp.uvue'
export default {
mixins:[{
inheritAttrs: true,
}],
components: {MixinComp: CompForComp},
props: {
namesakeMixinProp: {
type: String,
default: '组件内部的同名 props'
}
},
data(){
return {
namesakeMixinDataMsg: '组件内部的同名 data',
mixinWatchMsg: '',
rootElementTitle: '' as string | null
}
},
computed: {
namesakeMixinComputed(): string {
const res = '组件内部的同名 computed'
console.log(res)
return res
}
},
mounted(){
const rootElement = this.$refs['mixin-comp-root'] as Element
this.rootElementTitle = rootElement.getAttribute('title')
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg)
},
},
methods: {
namesakeMixinMethod(): string {
const res = '组件内部的同名 method'
console.log(res)
return res
},
changeGlobalMixinOnloadMsg1(){
this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'
}
}
}
</script>
pages/composition/mixins/components/CompForComp.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt component-for-component">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'component for component'
}
}
}
</script>
pages/composition/mixins/components/CompForPage.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt component-for-page">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'component for page'
}
}
}
</script>
pages/composition/mixins/components/GlobalChildMixinComp1.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt global-child-mixin-component-1">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'global child mixin component 1'
}
}
}
</script>
pages/composition/mixins/components/GlobalChildMixinComp2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt global-child-mixin-component-2">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'global child mixin component 2'
}
}
}
</script>
pages/composition/mixins/components/GlobalMixinComp1.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt global-mixin-component-1">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'global mixin component 1'
}
}
}
</script>
pages/composition/mixins/components/GlobalMixinComp2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt global-mixin-component-2">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'global mixin component 2'
}
}
}
</script>
pages/composition/mixins/components/MixinComp1.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-1">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component 1'
}
}
}
</script>
pages/composition/mixins/components/MixinComp2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-2">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component 2'
}
}
}
</script>
pages/composition/mixins/components/MixinCompForChildMixin.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-for-child-mixin">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component for child mixin'
}
}
}
</script>
pages/composition/mixins/components/MixinCompForGlobalChildMixin.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-for-global-child-mixin">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component for global child mixin'
}
}
}
</script>
pages/composition/mixins/components/MixinCompForGlobalMixin.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-for-global-mixin">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component for global mixin'
}
}
}
</script>
pages/composition/mixins/components/MixinCompForMixin.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<text class="uni-common-mt mixin-component-for-mixin">{{ title }}</text>
</template>
<script lang="uts">
export default {
data(){
return {
title: 'mixin component for mixin'
}
}
}
</script>
pages/composition/mixins/mixins-page2.test.js 0 → 100644
浏览文件 @ 200031dd
const PAGE_PATH = '/pages/composition/mixins/mixins-page2'
let page
describe('mixins-page2', () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('components', async () => {
const GlobalMixinComp1 = await page.$('.global-mixin-component-1')
const GlobalMixinComp1Text = await GlobalMixinComp1.text()
expect(GlobalMixinComp1Text).toBe('global mixin component 1')
const GlobalChildMixinComp1 = await page.$(
'.global-child-mixin-component-1'
)
const GlobalChildMixinComp1Text = await GlobalChildMixinComp1.text()
expect(GlobalChildMixinComp1Text).toBe('global child mixin component 1')
const GlobalMixinComp2 = await page.$('.global-mixin-component-2')
const GlobalMixinComp2Text = await GlobalMixinComp2.text()
expect(GlobalMixinComp2Text).toBe('global mixin component 2')
const GlobalChildMixinComp2 = await page.$(
'.global-child-mixin-component-2'
)
const GlobalChildMixinComp2Text = await GlobalChildMixinComp2.text()
expect(GlobalChildMixinComp2Text).toBe('global child mixin component 2')
const MixinComp1 = await page.$('.mixin-component-1')
const MixinComp1Text = await MixinComp1.text()
expect(MixinComp1Text).toBe('mixin component 1')
const ChildMixinComp1 = await page.$('.child-mixin-component-1')
const ChildMixinComp1Text = await ChildMixinComp1.text()
expect(ChildMixinComp1Text).toBe('child mixin component 1')
const MixinComp2 = await page.$('.mixin-component-2')
const MixinComp2Text = await MixinComp2.text()
expect(MixinComp2Text).toBe('mixin component 2')
const ChildMixinComp2 = await page.$('.child-mixin-component-2')
const ChildMixinComp2Text = await ChildMixinComp2.text()
expect(ChildMixinComp2Text).toBe('child mixin component 2')
const MixinCompForPage = await page.$('.component-for-page')
const MixinCompForPageText = await MixinCompForPage.text()
expect(MixinCompForPageText).toBe('component for page')
})
it('props', async () => {
const namesakeMixinProp = await page.$('.namesake-mixin-prop')
const namesakeMixinPropText = await namesakeMixinProp.text()
expect(namesakeMixinPropText).toBe('页面内的同名 props')
const namesakeChildMixinProp = await page.$('.namesake-child-mixin-prop')
const namesakeChildMixinPropText = await namesakeChildMixinProp.text()
expect(namesakeChildMixinPropText).toBe('页面内的同名 child props')
})
it('data', async () => {
const namesakeMixinDataMsgEl = await page.$('.namesake-mixin-data-msg')
const namesakeMixinDataMsg = await namesakeMixinDataMsgEl.text()
expect(namesakeMixinDataMsg).toBe('页面内的同名 data')
const namesakeChildMixinDataMsgEl = await page.$(
'.namesake-child-mixin-data-msg'
)
const namesakeChildMixinDataMsg = await namesakeChildMixinDataMsgEl.text()
expect(namesakeChildMixinDataMsg).toBe('页面内的同名 child data')
})
it('computed', async () => {
const namesakeMixinComputed = await page.$('.namesake-mixin-computed')
const namesakeMixinComputedText = await namesakeMixinComputed.text()
expect(namesakeMixinComputedText).toBe('页面内的同名 computed')
const namesakeChildMixinComputed = await page.$(
'.namesake-child-mixin-computed'
)
const namesakeChildMixinComputedText =
await namesakeChildMixinComputed.text()
expect(namesakeChildMixinComputedText).toBe('页面内的同名 child computed')
})
it('method', async () => {
const namesakeMixinMethod = await page.$('.namesake-mixin-method')
const namesakeMixinMethodText = await namesakeMixinMethod.text()
expect(namesakeMixinMethodText).toBe('页面内的同名 method')
const namesakeChildMixinMethod = await page.$(
'.namesake-child-mixin-method'
)
const namesakeChildMixinMethodText = await namesakeChildMixinMethod.text()
expect(namesakeChildMixinMethodText).toBe('页面内的同名 child method')
})
} else {
// TODO: web 端暂不支持
it('web', async () => {
expect(1).toBe(1)
})
}
})
pages/composition/mixins/mixins-page2.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<text class="bold">props:</text>
<text class="uni-common-mt namesake-mixin-prop">{{ namesakeMixinProp }}</text>
<text class="uni-common-mt namesake-child-mixin-prop">{{ namesakeChildMixinProp }}</text>
<text class="bold uni-common-mt">data:</text>
<text class="uni-common-mt namesake-mixin-data-msg">{{ namesakeMixinDataMsg }}</text>
<text class="uni-common-mt namesake-child-mixin-data-msg">{{ namesakeChildMixinDataMsg }}</text>
<text class="bold uni-common-mt">computed:</text>
<text class="uni-common-mt namesake-mixin-computed">{{ namesakeMixinComputed }}</text>
<text class="uni-common-mt namesake-child-mixin-computed">{{ namesakeChildMixinComputed }}</text>
<text class="uni-common-mt bold">method:</text>
<text class="uni-common-mt namesake-mixin-method">{{ namesakeMixinMethod() }}</text>
<text class="uni-common-mt namesake-child-mixin-method">{{ namesakeChildMixinMethod() }}</text>
<text class="uni-common-mt bold">mixin component:</text>
<GlobalMixinComp1 />
<GlobalChildMixinComp1 />
<GlobalMixinComp2 />
<GlobalChildMixinComp2 />
<MixinComp1 />
<ChildMixinComp1 />
<MixinComp2 />
<ChildMixinComp2 />
<MixinComp />
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
import MixinComp2 from './components/MixinComp2.uvue'
import ChildMixinComp2 from './components/ChildMixinComp2.uvue'
import CompForPage from './components/CompForPage.uvue'
import { pageMixin } from './mixins'
export default {
components: {
MixinComp: CompForPage
},
mixins: [
pageMixin,
{
mixins: [{
components: {ChildMixinComp2},
props: {
childMixinProp2: {
type: String,
default: '通过字面量定义非全局 child mixin props'
},
namesakeChildMixinProp: {
type: String,
default: '通过字面量定义非全局同名 child mixin props'
}
},
data() {
return {
childMixinDataMsg2: '通过字面量定义非全局 child mixin data',
namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',
childMixinOnLoadMsg2: '',
childMixinWatchMsg2: ''
}
},
computed: {
childMixinComputed2(): string {
const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnLoadMsg2: ${this.childMixinOnLoadMsg2}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过字面量定义非全局同名 child mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.childMixinWatchMsg2)
},
},
onLoad() {
const res = '通过字面量定义非全局 child mixin onLoad'
console.log(res)
this.childMixinOnLoadMsg2 = res
},
methods: {
childMixinMethod2(): string {
const res = '通过字面量定义非全局 child mixin method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '通过字面量定义非全局同名 child mixin method'
console.log(res)
return res
},
},
}],
components: {MixinComp2},
props: {
mixinProp2: {
type: String,
default: '通过字面量定义非全局 mixin props'
},
namesakeMixinProp: {
type: String,
default: '通过字面量定义非全局同名 mixin props'
}
},
data() {
return {
mixinDataMsg2: '通过字面量定义非全局 mixin data',
namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',
mixinOnloadMsg2: '',
mixinWatchMsg2: ''
}
},
computed: {
mixinComputed2(): string {
const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`
console.log(res)
return res
},
namesakeMixinComputed(): string {
const res = '通过字面量定义非全局同名 mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg2 = `通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg2)
},
},
onLoad() {
const res = '通过字面量定义非全局 mixin onLoad'
console.log(res)
this.mixinOnloadMsg2 = res
},
methods: {
mixinMethod2(): string {
const res = '通过字面量定义非全局 mixin method'
console.log(res)
return res
},
namesakeMixinMethod(): string {
const res = '通过字面量定义非全局同名 mixin method'
console.log(res)
return res
}
},
},
],
props: {
namesakeMixinProp: {
type: String,
default: '页面内的同名 props'
},
namesakeChildMixinProp: {
type: String,
default: '页面内的同名 child props'
},
},
data(){
return {
namesakeMixinDataMsg: '页面内的同名 data',
namesakeChildMixinDataMsg: '页面内的同名 child data',
mixinWatchMsg: ''
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg)
},
},
computed: {
namesakeMixinComputed(): string {
const res = '页面内的同名 computed'
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '页面内的同名 child computed'
console.log(res)
return res
}
},
methods: {
namesakeMixinMethod(): string {
const res = '页面内的同名 method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '页面内的同名 child method'
console.log(res)
return res
},
}
}
</script>
pages/composition/mixins/mixins.test.js 0 → 100644
浏览文件 @ 200031dd
const PAGE_PATH = '/pages/composition/mixins/mixins'
let page
describe('mixins', () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('inheritAttrs', async () => {
const comp1RootElementTitleEl = await page.$('.root-element-title-1')
const comp1RootElementTitleText = await comp1RootElementTitleEl.text()
expect(comp1RootElementTitleText).toBe('rootElementTitle: ')
const comp2RootElementTitleEl = await page.$('.root-element-title-2')
const comp2RootElementTitleText = await comp2RootElementTitleEl.text()
expect(comp2RootElementTitleText).toBe('rootElementTitle: title')
})
it('components', async () => {
const GlobalMixinComp1 = await page.$('.global-mixin-component-1')
const GlobalMixinComp1Text = await GlobalMixinComp1.text()
expect(GlobalMixinComp1Text).toBe('global mixin component 1')
const GlobalChildMixinComp1 = await page.$(
'.global-child-mixin-component-1'
)
const GlobalChildMixinComp1Text = await GlobalChildMixinComp1.text()
expect(GlobalChildMixinComp1Text).toBe('global child mixin component 1')
const GlobalMixinComp2 = await page.$('.global-mixin-component-2')
const GlobalMixinComp2Text = await GlobalMixinComp2.text()
expect(GlobalMixinComp2Text).toBe('global mixin component 2')
const GlobalChildMixinComp2 = await page.$(
'.global-child-mixin-component-2'
)
const GlobalChildMixinComp2Text = await GlobalChildMixinComp2.text()
expect(GlobalChildMixinComp2Text).toBe('global child mixin component 2')
const MixinComp1 = await page.$('.mixin-component-1')
const MixinComp1Text = await MixinComp1.text()
expect(MixinComp1Text).toBe('mixin component 1')
const ChildMixinComp1 = await page.$('.child-mixin-component-1')
const ChildMixinComp1Text = await ChildMixinComp1.text()
expect(ChildMixinComp1Text).toBe('child mixin component 1')
const MixinComp2 = await page.$('.mixin-component-2')
const MixinComp2Text = await MixinComp2.text()
expect(MixinComp2Text).toBe('mixin component 2')
const ChildMixinComp2 = await page.$('.child-mixin-component-2')
const ChildMixinComp2Text = await ChildMixinComp2.text()
expect(ChildMixinComp2Text).toBe('child mixin component 2')
const MixinCompForComp = await page.$('.component-for-component')
const MixinCompForCompText = await MixinCompForComp.text()
expect(MixinCompForCompText).toBe('component for component')
})
it('props', async () => {
const globalMixinProp1 = await page.$('.global-mixin-prop-1')
const globalMixinProp1Text = await globalMixinProp1.text()
expect(globalMixinProp1Text).toBe('通过 defineMixin 定义全局 mixin props')
const globalChildMixinProp1 = await page.$('.global-child-mixin-prop-1')
const globalChildMixinProp1Text = await globalChildMixinProp1.text()
expect(globalChildMixinProp1Text).toBe(
'通过 defineMixin 定义全局 child mixin props'
)
const globalMixinProp2 = await page.$('.global-mixin-prop-2')
const globalMixinProp2Text = await globalMixinProp2.text()
expect(globalMixinProp2Text).toBe('通过字面量定义全局 mixin props')
const globalChildMixinProp2 = await page.$('.global-child-mixin-prop-2')
const globalChildMixinProp2Text = await globalChildMixinProp2.text()
expect(globalChildMixinProp2Text).toBe(
'通过字面量定义全局 child mixin props'
)
const mixinProp1 = await page.$('.mixin-prop-1')
const mixinProp1Text = await mixinProp1.text()
expect(mixinProp1Text).toBe('通过 defineMixin 定义非全局 mixin props')
const childMixinProp1 = await page.$('.child-mixin-prop-1')
const childMixinProp1Text = await childMixinProp1.text()
expect(childMixinProp1Text).toBe(
'通过 defineMixin 定义非全局 child mixin props'
)
const mixinProp2 = await page.$('.mixin-prop-2')
const mixinProp2Text = await mixinProp2.text()
expect(mixinProp2Text).toBe('通过字面量定义非全局 mixin props')
const childMixinProp2 = await page.$('.child-mixin-prop-2')
const childMixinProp2Text = await childMixinProp2.text()
expect(childMixinProp2Text).toBe('通过字面量定义非全局 child mixin props')
const namesakeMixinProp = await page.$('.namesake-mixin-prop')
const namesakeMixinPropText = await namesakeMixinProp.text()
expect(namesakeMixinPropText).toBe('通过字面量定义非全局同名 mixin props')
const namesakeChildMixinProp = await page.$('.namesake-child-mixin-prop')
const namesakeChildMixinPropText = await namesakeChildMixinProp.text()
expect(namesakeChildMixinPropText).toBe(
'通过字面量定义非全局同名 child mixin props'
)
})
it('data', async () => {
const {
globalMixinDataMsg1,
globalChildMixinDataMsg1,
globalMixinDataMsg2,
globalChildMixinDataMsg2,
mixinDataMsg1,
childMixinDataMsg1,
mixinDataMsg2,
childMixinDataMsg2,
namesakeMixinDataMsg,
namesakeChildMixinDataMsg,
} = await page.data()
expect(globalMixinDataMsg1).toBe('通过 defineMixin 定义全局 mixin data')
expect(globalChildMixinDataMsg1).toBe(
'通过 defineMixin 定义全局 child mixin data'
)
expect(globalMixinDataMsg2).toBe('通过字面量定义全局 mixin data')
expect(globalChildMixinDataMsg2).toBe(
'通过字面量定义全局 child mixin data'
)
expect(mixinDataMsg1).toBe('通过 defineMixin 定义非全局 mixin data')
expect(childMixinDataMsg1).toBe(
'通过 defineMixin 定义非全局 child mixin data'
)
expect(mixinDataMsg2).toBe('通过字面量定义非全局 mixin data')
expect(childMixinDataMsg2).toBe('通过字面量定义非全局 child mixin data')
expect(namesakeMixinDataMsg).toBe('通过字面量定义非全局同名 mixin data')
expect(namesakeChildMixinDataMsg).toBe(
'通过字面量定义非全局同名 child mixin data'
)
})
it('emits', async () => {
let handleMixinEmitterMsgEl = await page.$('.handle-mixin-emitter-msg')
expect(handleMixinEmitterMsgEl).toBeNull()
const globaMixinEmit1Btn = await page.$('.global-mixin-emit-1')
await globaMixinEmit1Btn.tap()
handleMixinEmitterMsgEl = await page.$('.handle-mixin-emitter-msg')
let handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 globalMixinEmit1, 参数为 globalMixinEmit1'
)
const globalChildMixinEmit1Btn = await page.$(
'.global-child-mixin-emit-1'
)
await globalChildMixinEmit1Btn.tap()
handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 globalChildMixinEmit1, 参数为 globalChildMixinEmit1'
)
const globalMixinEmit2Btn = await page.$('.global-mixin-emit-2')
await globalMixinEmit2Btn.tap()
handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 globalMixinEmit2, 参数为 globalMixinEmit2'
)
const globalChildMixinEmit2Btn = await page.$(
'.global-child-mixin-emit-2'
)
await globalChildMixinEmit2Btn.tap()
handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 globalChildMixinEmit2, 参数为 globalChildMixinEmit2'
)
const mixinEmitBtn = await page.$('.mixin-emit')
await mixinEmitBtn.tap()
handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 mixinEmit, 参数为 mixinEmit'
)
const childMixinEmitBtn = await page.$('.child-mixin-emit')
await childMixinEmitBtn.tap()
handleMixinEmitterMsgText = await handleMixinEmitterMsgEl.text()
expect(handleMixinEmitterMsgText).toBe(
'handleMixinEmitterMsg: 触发 childMixinEmit, 参数为 childMixinEmit'
)
})
it('computed', async () => {
const globalMixinComputedEl1 = await page.$('.global-mixin-computed-1')
const globalMixinComputedText1 = await globalMixinComputedEl1.text()
expect(globalMixinComputedText1).toBe(
'通过 defineMixin 定义全局 mixin computed, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const globalChildMixinComputedEl1 = await page.$(
'.global-child-mixin-computed-1'
)
const globalChildMixinComputedText1 =
await globalChildMixinComputedEl1.text()
expect(globalChildMixinComputedText1).toBe(
'通过 defineMixin 定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg1: 通过 defineMixin 定义全局 child mixin onLoad'
)
const globalMixinComputedEl2 = await page.$('.global-mixin-computed-2')
const globalMixinComputedText2 = await globalMixinComputedEl2.text()
expect(globalMixinComputedText2).toBe(
'通过字面量定义全局 mixin computed, 更新后的 globalMixinOnloadMsg2: 通过字面量定义全局 mixin onLoad'
)
const globalChildMixinComputedEl2 = await page.$(
'.global-child-mixin-computed-2'
)
const globalChildMixinComputedText2 =
await globalChildMixinComputedEl2.text()
expect(globalChildMixinComputedText2).toBe(
'通过字面量定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg2: 通过字面量定义全局 child mixin onLoad'
)
const mixinComputedEl1 = await page.$('.mixin-computed-1')
const mixinComputedText1 = await mixinComputedEl1.text()
expect(mixinComputedText1).toBe(
'通过 defineMixin 定义非全局 mixin computed, 更新后的 mixinOnloadMsg1: 通过 defineMixin 定义非全局 mixin onLoad'
)
const childMixinComputedEl1 = await page.$('.child-mixin-computed-1')
const childMixinComputedText1 = await childMixinComputedEl1.text()
expect(childMixinComputedText1).toBe(
'通过 defineMixin 定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg1: 通过 defineMixin 定义非全局 child mixin onLoad'
)
const mixinComputedEl2 = await page.$('.mixin-computed-2')
const mixinComputedText2 = await mixinComputedEl2.text()
expect(mixinComputedText2).toBe(
'通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: 通过字面量定义非全局 mixin onLoad'
)
const childMixinComputedEl2 = await page.$('.child-mixin-computed-2')
const childMixinComputedText2 = await childMixinComputedEl2.text()
expect(childMixinComputedText2).toBe(
'通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg2: 通过字面量定义非全局 child mixin onLoad'
)
const namesakeMixinComputedEl = await page.$('.namesake-mixin-computed')
const namesakeMixinComputedText = await namesakeMixinComputedEl.text()
expect(namesakeMixinComputedText).toBe(
'通过字面量定义非全局同名 mixin computed'
)
const namesakeChildMixinComputedEl = await page.$(
'.namesake-child-mixin-computed'
)
const namesakeChildMixinComputedText =
await namesakeChildMixinComputedEl.text()
expect(namesakeChildMixinComputedText).toBe(
'通过字面量定义非全局同名 child mixin computed'
)
})
it('watch', async () => {
const globalMixinWatchEl1 = await page.$('.global-mixin-watch-1')
const globalMixinWatchText1 = await globalMixinWatchEl1.text()
expect(globalMixinWatchText1).toBe(
'通过 defineMixin 定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const globalChildMixinWatchEl1 = await page.$(
'.global-child-mixin-watch-1'
)
const globalChildMixinWatchText1 = await globalChildMixinWatchEl1.text()
expect(globalChildMixinWatchText1).toBe(
'通过 defineMixin 定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const globalMixinWatchEl2 = await page.$('.global-mixin-watch-2')
const globalMixinWatchText2 = await globalMixinWatchEl2.text()
expect(globalMixinWatchText2).toBe(
'通过字面量定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const globalChildMixinWatchEl2 = await page.$(
'.global-child-mixin-watch-2'
)
const globalChildMixinWatchText2 = await globalChildMixinWatchEl2.text()
expect(globalChildMixinWatchText2).toBe(
'通过字面量定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const mixinWatchEl1 = await page.$('.mixin-watch-1')
const mixinWatchText1 = await mixinWatchEl1.text()
expect(mixinWatchText1).toBe(
'通过 defineMixin 定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const childMixinWatchEl1 = await page.$('.child-mixin-watch-1')
const childMixinWatchText1 = await childMixinWatchEl1.text()
expect(childMixinWatchText1).toBe(
'通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const mixinWatchEl2 = await page.$('.mixin-watch-2')
const mixinWatchText2 = await mixinWatchEl2.text()
expect(mixinWatchText2).toBe(
'通过字面量定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const childMixinWatchEl2 = await page.$('.child-mixin-watch-2')
const childMixinWatchText2 = await childMixinWatchEl2.text()
expect(childMixinWatchText2).toBe(
'通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const mixinWatchEl = await page.$('.mixin-watch')
const mixinWatchText = await mixinWatchEl.text()
expect(mixinWatchText).toBe(
'页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: 通过 defineMixin 定义全局 mixin onLoad'
)
const Comp2 = await page.$('.comp2')
await Comp2.callMethod('changeGlobalMixinOnloadMsg1')
const mixinWatchMsgEl = await page.$('.mixin-watch-msg')
const mixinWatchMsgText = await mixinWatchMsgEl.text()
expect(mixinWatchMsgText).toBe(
'组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: new globalMixinOnloadMsg1 changed in comp2'
)
})
it('lifecycle execution sequence', async () => {
const {
globalMixinOnloadTime1,
globalChildMixinOnloadTime1,
globalMixinOnloadTime2,
globalChildMixinOnloadTime2,
mixinOnloadTime1,
childMixinOnloadTime1,
mixinOnloadTime2,
childMixinOnloadTime2,
mixinOnloadTime,
} = await page.data()
expect(globalChildMixinOnloadTime1).toBeLessThanOrEqual(
globalMixinOnloadTime1
)
expect(globalChildMixinOnloadTime2).toBeLessThanOrEqual(
globalMixinOnloadTime2
)
expect(globalMixinOnloadTime1).toBeLessThanOrEqual(childMixinOnloadTime1)
expect(globalMixinOnloadTime2).toBeLessThanOrEqual(childMixinOnloadTime2)
expect(childMixinOnloadTime1).toBeLessThanOrEqual(mixinOnloadTime1)
expect(childMixinOnloadTime2).toBeLessThanOrEqual(mixinOnloadTime2)
expect(mixinOnloadTime1).toBeLessThanOrEqual(mixinOnloadTime)
expect(mixinOnloadTime2).toBeLessThanOrEqual(mixinOnloadTime)
})
it('methods', async () => {
const globalMixinMethod1El = await page.$('.global-mixin-method-1')
const globalMixinMethod1Text = await globalMixinMethod1El.text()
expect(globalMixinMethod1Text).toBe(
'通过 defineMixin 定义全局 mixin method'
)
const globalChildMixinMethod1El = await page.$(
'.global-child-mixin-method-1'
)
const globalChildMixinMethod1Text = await globalChildMixinMethod1El.text()
expect(globalChildMixinMethod1Text).toBe(
'通过 defineMixin 定义全局 child mixin method'
)
const globalMixinMethod2El = await page.$('.global-mixin-method-2')
const globalMixinMethod2Text = await globalMixinMethod2El.text()
expect(globalMixinMethod2Text).toBe('通过字面量定义全局 mixin method')
const globalChildMixinMethod2El = await page.$(
'.global-child-mixin-method-2'
)
const globalChildMixinMethod2Text = await globalChildMixinMethod2El.text()
expect(globalChildMixinMethod2Text).toBe(
'通过字面量定义全局 child mixin method'
)
const mixinMethod1El = await page.$('.mixin-method-1')
const mixinMethod1Text = await mixinMethod1El.text()
expect(mixinMethod1Text).toBe('通过 defineMixin 定义非全局 mixin method')
const childMixinMethod1El = await page.$('.child-mixin-method-1')
const childMixinMethod1Text = await childMixinMethod1El.text()
expect(childMixinMethod1Text).toBe(
'通过 defineMixin 定义非全局 child mixin method'
)
const mixinMethod2El = await page.$('.mixin-method-2')
const mixinMethod2Text = await mixinMethod2El.text()
expect(mixinMethod2Text).toBe('通过字面量定义非全局 mixin method')
const childMixinMethod2El = await page.$('.child-mixin-method-2')
const childMixinMethod2Text = await childMixinMethod2El.text()
expect(childMixinMethod2Text).toBe(
'通过字面量定义非全局 child mixin method'
)
const namesakeMixinMethodEl = await page.$('.namesake-mixin-method')
const namesakeMixinMethodText = await namesakeMixinMethodEl.text()
expect(namesakeMixinMethodText).toBe(
'通过字面量定义非全局同名 mixin method'
)
const namesakeChildMixinMethodEl = await page.$(
'.namesake-child-mixin-method'
)
const namesakeChildMixinMethodText =
await namesakeChildMixinMethodEl.text()
expect(namesakeChildMixinMethodText).toBe(
'通过字面量定义非全局同名 child mixin method'
)
})
} else {
// TODO: web 端暂不支持
it('web', async () => {
expect(1).toBe(1)
})
}
})
pages/composition/mixins/mixins.uts 0 → 100644
浏览文件 @ 200031dd
import MixinComp1 from './components/MixinComp1.uvue'
import ChildMixinComp1 from './components/ChildMixinComp1.uvue'
import MixinCompForMixin from './components/MixinCompForMixin.uvue'
import MixinCompForChildMixin from './components/MixinCompForChildMixin.uvue'
export const pageMixin = defineMixin({
mixins: [childMixin],
components: { MixinComp1, MixinComp: MixinCompForMixin },
props: {
mixinProp1: {
type: String,
default: '通过 defineMixin 定义非全局 mixin props'
},
namesakeMixinProp: {
type: String,
default: '通过 defineMixin 定义非全局同名 mixin props'
}
},
data() {
return {
mixinDataMsg1: '通过 defineMixin 定义非全局 mixin data',
namesakeMixinDataMsg: '通过 defineMixin 定义非全局同名 mixin data',
mixinOnloadMsg1: '',
mixinOnloadTime1: 0,
mixinWatchMsg1: ''
}
},
computed: {
mixinComputed1(): string {
const res = `通过 defineMixin 定义非全局 mixin computed, 更新后的 mixinOnloadMsg1: ${this.mixinOnloadMsg1}`
console.log(res)
return res
},
namesakeMixinComputed(): string {
const res = '通过 defineMixin 定义非全局同名 mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg1 = `通过 defineMixin 定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg1)
},
},
onLoad() {
this.mixinOnloadTime1 = Date.now()
const res = '通过 defineMixin 定义非全局 mixin onLoad'
console.log(res)
this.mixinOnloadMsg1 = res
},
methods: {
mixinMethod1(): string {
const res = '通过 defineMixin 定义非全局 mixin method'
console.log(res)
return res
},
namesakeMixinMethod(): string {
const res = '通过 defineMixin 定义非全局同名 mixin method'
console.log(res)
return res
}
}
})
const childMixin = defineMixin({
components: { ChildMixinComp1, MixinComp: MixinCompForChildMixin },
props: {
childMixinProp1: {
type: String,
default: '通过 defineMixin 定义非全局 child mixin props'
},
namesakeChildMixinProp: {
type: String,
default: '通过 defineMixin 定义非全局同名 child mixin props'
}
},
data() {
return {
childMixinDataMsg1: '通过 defineMixin 定义非全局 child mixin data',
namesakeChildMixinDataMsg: '通过 defineMixin 定义非全局同名 mixin data',
childMixinOnloadMsg1: '',
childMixinOnloadTime1: 0,
childMixinWatchMsg1: ''
}
},
computed: {
childMixinComputed1(): string {
const res = `通过 defineMixin 定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg1: ${this.childMixinOnloadMsg1}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过 defineMixin 定义非全局同名 child computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.childMixinWatchMsg1 = `通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.childMixinWatchMsg1)
},
},
onLoad() {
this.childMixinOnloadTime1 = Date.now()
const res = '通过 defineMixin 定义非全局 child mixin onLoad'
console.log(res)
this.childMixinOnloadMsg1 = res
},
methods: {
childMixinMethod1(): string {
const res = '通过 defineMixin 定义非全局 child mixin method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '通过 defineMixin 定义非全局同名 child mixin method'
console.log(res)
return res
},
}
})
pages/composition/mixins/mixins.uvue 0 → 100644
浏览文件 @ 200031dd
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<button type="primary" @click="goMixinPage2">跳转 mixin page 2</button>
<text class="uni-common-mt bold">props:</text>
<text class="uni-common-mt global-mixin-prop-1">{{ globalMixinProp1 }}</text>
<text class="uni-common-mt global-child-mixin-prop-1">{{ globalChildMixinProp1 }}</text>
<text class="uni-common-mt global-mixin-prop-2">{{ globalMixinProp2 }}</text>
<text class="uni-common-mt global-child-mixin-prop-2">{{ globalChildMixinProp2 }}</text>
<text class="uni-common-mt mixin-prop-1">{{ mixinProp1 }}</text>
<text class="uni-common-mt child-mixin-prop-1">{{ childMixinProp1 }}</text>
<text class="uni-common-mt mixin-prop-2">{{ mixinProp2 }}</text>
<text class="uni-common-mt child-mixin-prop-2">{{ childMixinProp2 }}</text>
<text class="uni-common-mt namesake-mixin-prop">{{ namesakeMixinProp }}</text>
<text class="uni-common-mt namesake-child-mixin-prop">{{ namesakeChildMixinProp }}</text>
<text class="bold uni-common-mt">data:</text>
<text class="uni-common-mt global-mixin-data-msg-1">{{ globalMixinDataMsg1 }}</text>
<text class="uni-common-mt global-child-mixin-data-msg-1">{{ globalChildMixinDataMsg1 }}</text>
<text class="uni-common-mt global-mixin-data-msg-2">{{ globalMixinDataMsg2 }}</text>
<text class="uni-common-mt global-child-mixin-data-msg-2">{{ globalChildMixinDataMsg2 }}</text>
<text class="uni-common-mt mixin-data-msg-1">{{ mixinDataMsg1 }}</text>
<text class="uni-common-mt child-mixin-data-msg-1">{{ childMixinDataMsg1 }}</text>
<text class="uni-common-mt mixin-data-msg-2">{{ mixinDataMsg2 }}</text>
<text class="uni-common-mt child-mixin-data-msg-2">{{ childMixinDataMsg2 }}</text>
<text class="uni-common-mt namesake-mixin-data-msg">{{ namesakeMixinDataMsg }}</text>
<text class="uni-common-mt namesake-child-mixin-data-msg">{{ namesakeChildMixinDataMsg }}</text>
<text class="bold uni-common-mt">computed:</text>
<text class="uni-common-mt global-mixin-computed-1">{{ globalMixinComputed1 }}</text>
<text class="uni-common-mt global-child-mixin-computed-1">{{ globalChildMixinComputed1 }}</text>
<text class="uni-common-mt global-mixin-computed-2">{{ globalMixinComputed2 }}</text>
<text class="uni-common-mt global-child-mixin-computed-2">{{ globalChildMixinComputed2 }}</text>
<text class="uni-common-mt mixin-computed-1">{{ mixinComputed1 }}</text>
<text class="uni-common-mt child-mixin-computed-1">{{ childMixinComputed1 }}</text>
<text class="uni-common-mt mixin-computed-2">{{ mixinComputed2 }}</text>
<text class="uni-common-mt child-mixin-computed-2">{{ childMixinComputed2 }}</text>
<text class="uni-common-mt namesake-mixin-computed">{{ namesakeMixinComputed }}</text>
<text class="uni-common-mt namesake-child-mixin-computed">{{ namesakeChildMixinComputed }}</text>
<text class="bold uni-common-mt">watch:</text>
<text class="uni-common-mt global-mixin-watch-1">{{ globalMixinWatchMsg1 }}</text>
<text class="uni-common-mt global-child-mixin-watch-1">{{ globalChildMixinWatchMsg1 }}</text>
<text class="uni-common-mt global-mixin-watch-2">{{ globalMixinWatchMsg2 }}</text>
<text class="uni-common-mt global-child-mixin-watch-2">{{ globalChildMixinWatchMsg2 }}</text>
<text class="uni-common-mt mixin-watch-1">{{ mixinWatchMsg1 }}</text>
<text class="uni-common-mt child-mixin-watch-1">{{ childMixinWatchMsg1 }}</text>
<text class="uni-common-mt mixin-watch-2">{{ mixinWatchMsg2 }}</text>
<text class="uni-common-mt child-mixin-watch-2">{{ childMixinWatchMsg2 }}</text>
<text class="uni-common-mt mixin-watch">{{ mixinWatchMsg }}</text>
<text class="bold uni-common-mt">lifecycle:</text>
<text class="uni-common-mt">{{ globalMixinOnloadMsg1 }}</text>
<text class="uni-common-mt">{{ globalMixinOnloadMsg2 }}</text>
<text class="uni-common-mt">{{ globalChildMixinOnloadMsg1 }}</text>
<text class="uni-common-mt">{{ globalChildMixinOnloadMsg2 }}</text>
<text class="uni-common-mt">{{ mixinOnloadMsg1 }}</text>
<text class="uni-common-mt">{{ mixinOnloadMsg2 }}</text>
<text class="uni-common-mt">{{ childMixinOnloadMsg1 }}</text>
<text class="uni-common-mt">{{ childMixinOnloadMsg2 }}</text>
<text class="uni-common-mt">{{ onloadMsg }}</text>
<text class="uni-common-mt bold">method:</text>
<text class="uni-common-mt global-mixin-method-1">{{ globalMixinMethod1() }}</text>
<text class="uni-common-mt global-child-mixin-method-1">{{ globalChildMixinMethod1() }}</text>
<text class="uni-common-mt global-mixin-method-2">{{ globalMixinMethod2() }}</text>
<text class="uni-common-mt global-child-mixin-method-2">{{ globalChildMixinMethod2() }}</text>
<text class="uni-common-mt mixin-method-1">{{ mixinMethod1() }}</text>
<text class="uni-common-mt child-mixin-method-1">{{ childMixinMethod1() }}</text>
<text class="uni-common-mt mixin-method-2">{{ mixinMethod2() }}</text>
<text class="uni-common-mt child-mixin-method-2">{{ childMixinMethod2() }}</text>
<text class="uni-common-mt namesake-mixin-method">{{ namesakeMixinMethod() }}</text>
<text class="uni-common-mt namesake-child-mixin-method">{{ namesakeChildMixinMethod() }}</text>
<text class="uni-common-mt bold">component:</text>
<Comp1
title="title"
@globalMixinEmit1="(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)"
@globalChildMixinEmit1="(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)"
@globalMixinEmit2="(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)"
@globalChildMixinEmit2="(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)"
@mixinEmit="(arg: string) => handleMixinEmitter('mixinEmit', arg)"
@childMixinEmit="(arg: string) => handleMixinEmitter('childMixinEmit', arg)" />
<text v-if="handleMixinEmitterMsg" class="uni-common-mt handle-mixin-emitter-msg"
>handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}</text
>
<Comp2 class='comp2' title="title" />
<text class="uni-common-mt bold">mixin component:</text>
<GlobalMixinComp1 />
<GlobalChildMixinComp1 />
<GlobalMixinComp2 />
<GlobalChildMixinComp2 />
<MixinComp1 />
<ChildMixinComp1 />
<MixinComp2 />
<ChildMixinComp2 />
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
import Comp1 from './components/Comp1.uvue'
import Comp2 from './components/Comp2.uvue'
import MixinComp2 from './components/MixinComp2.uvue'
import ChildMixinComp2 from './components/ChildMixinComp2.uvue'
import { pageMixin } from './mixins'
export default {
components: {
Comp1,
Comp2,
},
mixins: [
pageMixin,
{
mixins: [{
components: {ChildMixinComp2},
props: {
childMixinProp2: {
type: String,
default: '通过字面量定义非全局 child mixin props'
},
namesakeChildMixinProp: {
type: String,
default: '通过字面量定义非全局同名 child mixin props'
}
},
data() {
return {
childMixinDataMsg2: '通过字面量定义非全局 child mixin data',
namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',
childMixinOnloadMsg2: '',
childMixinOnloadTime2: 0,
childMixinWatchMsg2: ''
}
},
computed: {
childMixinComputed2(): string {
const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg2: ${this.childMixinOnloadMsg2}`
console.log(res)
return res
},
namesakeChildMixinComputed(): string {
const res = '通过字面量定义非全局同名 child mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.childMixinWatchMsg2)
},
},
onLoad() {
this.childMixinOnloadTime2 = Date.now()
const res = '通过字面量定义非全局 child mixin onLoad'
console.log(res)
this.childMixinOnloadMsg2 = res
},
methods: {
childMixinMethod2(): string {
const res = '通过字面量定义非全局 child mixin method'
console.log(res)
return res
},
namesakeChildMixinMethod(): string {
const res = '通过字面量定义非全局同名 child mixin method'
console.log(res)
return res
},
},
}],
components: {MixinComp2},
props: {
mixinProp2: {
type: String,
default: '通过字面量定义非全局 mixin props'
},
namesakeMixinProp: {
type: String,
default: '通过字面量定义非全局同名 mixin props'
}
},
data() {
return {
mixinDataMsg2: '通过字面量定义非全局 mixin data',
namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',
mixinOnloadMsg2: '',
mixinOnloadTime2: 0,
mixinWatchMsg2: ''
}
},
computed: {
mixinComputed2(): string {
const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`
console.log(res)
return res
},
namesakeMixinComputed(): string {
const res = '通过字面量定义非全局同名 mixin computed'
console.log(res)
return res
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg2 = `通过字面量定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg2)
},
},
onLoad() {
this.mixinOnloadTime2 = Date.now()
const res = '通过字面量定义非全局 mixin onLoad'
console.log(res)
this.mixinOnloadMsg2 = res
},
methods: {
mixinMethod2(): string {
const res = '通过字面量定义非全局 mixin method'
console.log(res)
return res
},
namesakeMixinMethod(): string {
const res = '通过字面量定义非全局同名 mixin method'
console.log(res)
return res
}
},
},
],
data(){
return {
handleMixinEmitterMsg: '',
mixinWatchMsg: '',
mixinOnloadTime: 0,
onloadMsg: ''
}
},
watch: {
globalMixinOnloadMsg1(newVal: string) {
this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
console.log(this.mixinWatchMsg)
},
},
onLoad(){
this.mixinOnloadTime = Date.now()
const res = '页面内的 onLoad'
console.log(res)
this.onloadMsg = res
},
methods: {
goMixinPage2(){
uni.navigateTo({url: './mixins-page2'})
},
handleMixinEmitter(emit: string, arg: string){
this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`
console.log(this.handleMixinEmitterMsg)
}
}
}
</script>
pages/index.uvue
浏览文件 @ 200031dd
......@@ -215,20 +215,20 @@
url: 'render',
enable: false,
},
{
name: 'slots',
url: 'slots',
enable: true,
},
{
name: 'component',
url: 'component',
enable: true,
},
{
name: 'unrecognized component',
url: 'unrecognized-component',
enable: true,
{
name: 'slots',
url: 'slots',
enable: true,
},
{
name: 'component',
url: 'component',
enable: true,
},
{
name: 'unrecognized component',
url: 'unrecognized-component',
enable: true,
},
] as PageItem[],
},
......@@ -352,7 +352,12 @@
{
name: 'mixins',
url: 'mixins',
// #ifdef APP-ANDROID
enable: true,
// #endif
// #ifndef APP-ANDROID
enable: false,
// #endif
},
{
name: 'extends',
......
pages/lifecycle/page/page.uvue
浏览文件 @ 200031dd
......@@ -2,9 +2,9 @@
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="uni-padding-wrap container">
<view class="page">
<text>page lifecycle</text>
<button @click="scrollToBottom">scrollToBottom</button>
<button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或