How to create Vue.js slot programmatically?
I have the following component with a slot:
{{ someProp }}
-
I looked into TypeScript definition files of
Vue.jsand I found an undocumented function on Vue component instance:$createElement(). My guess is, it is the same function that is passed torender(createElement)function of the component. So, I am able to solve it as:const Constr = Vue.extend(MyComponent); const instance = new Constr({ propsData: { someProp: 'My Heading' } }); // Creating simple slot const node = instance.$createElement('div', ['Hello']); instance.$slots.default = [node]; instance.$mount(body);But this is clearly undocumented and hence questionable approach. I will not mark it answered if there is some better approach available.
讨论(0) -
I think I have finally stumbled on a way to programmatically create a slot element. From what I can tell, the approach does not seem to work for functional components. I am not sure why.
If you are implementing your own render method for a component, you can programmatically create slots that you pass to child elements using the createElement method (or whatever you have aliased it to in the render method), and passing a data hash that includes { slot: NAME_OF_YOUR_SLOT } followed by the array of children within that slot.
For example:
Vue.config.productionTip = false Vue.config.devtools = false; Vue.component('parent', { render (createElement) { return createElement('child', [ createElement('h1', { slot: 'parent-slot' }, 'Parent-provided Named Slot'), createElement('h2', { slot: 'default' }, 'Parent-provided Default Slot') ]) } }) Vue.component('child', { template: '<div><slot name="parent-slot" /><slot /></div>' }) new Vue({ el: '#app', template: '<parent />' })<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id='app'> </div>讨论(0) -
I just came across an answer to this in vue forum: slots
The principle is: There is nothing like createElement('slot'..) Instead there is a render function which provides the slotted innerHtml as function: $scopedSlots.default()
Usage:
render: function (createElement) { const self = this; return createElement("div", this.$scopedSlots.default()); }If you want to provide a default in case there is no content given for the slots, you need to code a disctinction yourself and render something else. (The link above holds a more detailed example)
The function returns an array, therefore it can not be used as a root for the render function. It need to be wrapped into single container node like div in the example above.
讨论(0) -
(This doesn't really answer
How to create Vue.js slot programatically?. But it does solve your problem.)This trick is less hackish compared to using
$createElement().Basically, create a new component that register
MyComponentas a local component.const Constr = Vue.extend({ template: ` <MyComponent someProp="My Heading"> <div>slot here !!!</div> </MyComponent> `, components: { MyComponent: MyComponent } }); const instance = new Constr().$mount('#app');Demo: https://jsfiddle.net/jacobgoh101/shrn26p1/
讨论(0)
加载中...
- 热议问题