diff --git a/packages/mixins/relation.js b/packages/mixins/relation.js index 0ff18d25e..9503c4480 100644 --- a/packages/mixins/relation.js +++ b/packages/mixins/relation.js @@ -5,6 +5,10 @@ export function ChildrenMixin(parent) { computed: { parent() { return this[parent]; + }, + + index() { + return this.parent.children.indexOf(this); } }, diff --git a/packages/sidebar-item/index.js b/packages/sidebar-item/index.js index 1bc302c3c..1aac9a18e 100644 --- a/packages/sidebar-item/index.js +++ b/packages/sidebar-item/index.js @@ -1,43 +1,28 @@ import { use } from '../utils'; import Info from '../info'; +import { ChildrenMixin } from '../mixins/relation'; const [sfc, bem] = use('sidebar-item'); export default sfc({ + mixins: [ChildrenMixin('vanSidebar')], + props: { url: String, info: [String, Number], title: String }, - inject: ['vanSidebar'], - - created() { - this.parent.items.push(this); - }, - - beforeDestroy() { - this.parent.items = this.parent.items.filter(item => item !== this); - }, - computed: { - parent() { - if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) { - console.error('[Vant] SidebarItem needs to be child of Sidebar'); - } - return this.vanSidebar; - }, - select() { - return this.parent.items.indexOf(this) === +this.parent.activeKey; + return this.index === +this.parent.activeKey; } }, methods: { onClick() { - const index = this.parent.items.indexOf(this); - this.$emit('click', index); - this.parent.$emit('change', index); + this.$emit('click', this.index); + this.parent.$emit('change', this.index); } }, diff --git a/packages/sidebar/index.js b/packages/sidebar/index.js index e64977739..fd8713d03 100644 --- a/packages/sidebar/index.js +++ b/packages/sidebar/index.js @@ -1,8 +1,11 @@ import { use } from '../utils'; +import { ParentMixin } from '../mixins/relation'; const [sfc, bem] = use('sidebar'); export default sfc({ + mixins: [ParentMixin('vanSidebar')], + props: { activeKey: { type: [Number, String], @@ -10,18 +13,6 @@ export default sfc({ } }, - provide() { - return { - vanSidebar: this - }; - }, - - data() { - return { - items: [] - }; - }, - render(h) { return