Skip to content

Instantly share code, notes, and snippets.

@isobit
Created July 29, 2016 20:26
Show Gist options
  • Save isobit/1efb58edb0598e37da348236b15c3022 to your computer and use it in GitHub Desktop.
Save isobit/1efb58edb0598e37da348236b15c3022 to your computer and use it in GitHub Desktop.
Vue Scoped Slot
var scopedSlot = {
plugin: {
install: function(Vue) {
Vue.elementDirective('scoped-slot', this.elementDirective);
}
},
mixin: {
elementDirectives: {
'scoped-slot': this.elementDirective
}
},
elementDirective: {
params: ["name", "scope"],
bind: function() {
var name = this.params.name || "default";
var content = this.vm._slotContents && this.vm._slotContents[name];
if (content) {
var node = content.cloneNode(true);
var scope = Object.create(this.vm.$parent);
Object.assign(scope, this.params.scope);
this.vm._context.$compile(node, this.vm, scope, this._frag);
Vue.util.replace(this.el, node);
}
}
}
};
@isobit
Copy link
Author

isobit commented Dec 15, 2016

Note: scoped slots now exist in Vue 2! https://vuejs.org/v2/guide/components.html#Scoped-Slots

@yuens1002
Copy link

hi josh, i'm trying to understand the js part of scoped slot where the docs from vue missed.... can you give an easy example of a scoped slot with its js part?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment