Dynamic Components with Slots

Question

How can I use named slots from dynamic components in the parent component?

A slider component takes an array of dynamic slide components:

Each slide has named slots with content to be using by the slider:

The slider should now use these slots, like so:

But ignores its inner content, so the slots are ignored.

Example:
https://codepen.io/anon/pen/WZjENK?editors=1010

If this isn't possible, is there another way to create a slider that takes HTML content from slide components without caring about their content?

user_38065 · Answer

By splitting the main/meta sections into their own components, you can relatively easily use a render function to split them into the sections you want.

console.clear()

const slide1Meta = {
  template:`Slide 1 Meta` 
}
const slide1Main = {
  template: `Slide 1 Main`
}
const slide2Meta = {
  template:`Slide 2 Meta` 
}
const slide2Main = {
  template: `Slide 2 Main`
}

Vue.component('slider', {
  props: {
    slides: {
      type: Array,
      required: true
    }    
  },
  render(h){
    let children = this.slides.map(slide => {
      let main = h('div', {class: "slider__slide__main"}, [h(slide.main)])
      let meta = h('div', {class: "slider_slide_meta"}, [h(slide.meta)])
      return h('div', {class: "slider__slide"}, [main, meta])
    })
    return h('div', {class: "slider"}, children)
  }
});


new Vue({
  el: '#app',
  data: {
    slides: [
      {meta: slide1Meta, main: slide1Main}, 
      {meta: slide1Meta, main: slide2Main}
    ]
  }
});

user_3596672 · Answer

Actually slots within a dynamic component element do work. I have have been attempting to solve this same issue, and found this lovely little example by Patrick O'Dacre on CodePen. Patrick has made ample and useful comments in his code which I paste verbatim here for posterity. I omitted the css which you can find on CodePen.

const NoData = {
    template: `
        This component ignores the data completely. 
        But there are slots!
         
        
    `
    // In this component, I just ignore the props completely
}
    
const DefaultMessage = {
    template: `
        This component will show the default msg: {{parentData.msg}}
    `,
    // this component won't have posts like the Async Component, so we just ignore it
    props: ['parentData']
}
    
const CustomMessage = {
    template: `
        This component shows a custom msg: {{parentData.msg}}
    `,
    // this component won't have posts like the Async Component, so we just ignore it
    props: ['parentData']
}
    
const Async = {
    template: `
        Posts
        {{parentData.msg}}
        
            
                
                    
                        Title: {{post.title}}
                    
                
            
        
    `,
    props: ['parentData']
}
    
/* Children should only affect parent properties via an EVENT (this.$emit) */
const ChangeMessage = {
    template: `
        Type here to change the message from the child component via an event.
        
    `,
    data() {
        return {
            // initialize our message with the prop from the parent.
            message: this.parentData.msg ? this.parentData.msg : '' 
        }
    },
    props: ['parentData'],
    /* Need to watch parentData.msg if we want to continue
      to update this.message when the parent updates the msg */
    watch: {
        'parentData.msg': function (msg) {
            this.message = msg  
        }
    },
    methods: {
        updateDateParentMessage() {
            this.$emit('messageChanged', this.message)
        }
    }
};

const Home = {
    template: `
        
            
                Change the current component's message from the Home (parent) component:
                
                Important! We do not change these props from the child components. You must use events for this.
            
        

        
            
            
            
            
            
            
        

        
            
                Current Component - {{currentComponent ? currentComponent : 'None'}}
                

                
                
                    This is a default slot
                    This is a NAMED slot
                    Here we pass in the message via a slot rather than as a prop:
{{dataForChild.msg}}
                
                
            
        
    `,

    data() {
        return {
            currentComponent: false,
            /* You don't NEED to put msg and posts here, but
                I prefer it. It helps me keep track of what info
                my dynamic components need. */
            dataForChild: {
                // All components:
                msg: '', 
                
                // Async Component only
                posts: [] 
            }
        }
    },
    methods: {
        /**
         * Set the current component and the data it requires 
         *
         * @param {string} component The name of the component
         * @param {object} data The data object that will be passed to the child component
         */
        activateComponent(component, data = { posts: [], msg: 'This is a default msg.'}) {
            this.dataForChild = data;
            this.currentComponent = component;
        },
        deactivateComponent() {
            this.dataForChild.msg = '';
            this.currentComponent = false;
        },
        /* Hold off on loading the component until some async data is retrieved */
        getPosts() {
            axios.get('https://codepen.io/patrickodacre/pen/WOEXOX.js').then( resp => {
                const posts = resp.data.slice(0, 10) // get first 10 posts only.
                // activate the component ONLY when we have our results
                this.activateComponent('Async', {posts, msg: `Here are your posts.`})
            })
        },
        /** 
         * Update the message from the child
         *
         * @listens event:messageChanged
         * @param {string} newMessage The new message from the child component
         */
        updateMessage(newMessage) {
            this.dataForChild.msg = newMessage
        }
    },
    // must wire up your child components here
    components: {
        NoData,
        CustomMessage,
        DefaultMessage,
        Async,
        ChangeMessage
    }
} 

const routes = [
    { path: '/', name: 'home', component: Home}
];
    
const router = new VueRouter({
    routes
});
    
const app = new Vue({
    router
}).$mount("#app")

The html,


    Vue.js Dynamic Components with Props, Events, Slots and Keep Alive
    Each button loads a different component, dynamically.
    In the Home component, you may uncomment the 'keep-alive' component to see how things change with the 'ChangeMessage' component.

Dynamic Components with Slots

2 Answers