diff --git a/src/index.js b/src/index.js index 4409bd7..9dcce1c 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,10 @@ import { export default function wrap (Vue, Component) { const isAsync = typeof Component === 'function' && !Component.cid + + if (!isAsync && Component.extends && Vue.util.mergeOptions) { + Component = Vue.util.mergeOptions(Component, Component.extends) + } let isInitialized = false let hyphenatedPropsList let camelizedPropsList diff --git a/test/fixtures/extended-component-properties.html b/test/fixtures/extended-component-properties.html new file mode 100644 index 0000000..d7bcf53 --- /dev/null +++ b/test/fixtures/extended-component-properties.html @@ -0,0 +1,26 @@ + + + + diff --git a/test/test.js b/test/test.js index 9f60f7f..48f1b98 100644 --- a/test/test.js +++ b/test/test.js @@ -23,6 +23,29 @@ test('properties', async () => { expect(newBar).toBe('lol') }) +test('extended-component-properties', async () => { + const { page } = await launchPage(`extended-component-properties`) + + // props proxying: get + const foo = await page.evaluate(() => el.foo) + expect(foo).toBe(123) + + // get camelCase + const someProp = await page.evaluate(() => el.someProp) + expect(someProp).toBe('bar') + + // props proxying: set + await page.evaluate(() => { + el.foo = 234 + el.someProp = 'lol' + }) + const newFoo = await page.evaluate(() => el.vueComponent.foo) + + expect(newFoo).toBe(234) + const newBar = await page.evaluate(() => el.vueComponent.someProp) + expect(newBar).toBe('lol') +}) + test('attributes', async () => { const { page } = await launchPage(`attributes`)