How to render a list of static content with Vue named slot?

Question

I have trouble figuring out how to get the following to work:

My parent template

  link 1
  

        

Answer 1

You can make use of scoped slots instead of slots

Your comp component receives a prop links which is an array of links(since static initialized as a custom option). Iterate over the links and pass link as data to the slot just like passing props to a component

   Vue.component("comp", {
  template: `
    

      

          
      
    
  `,
  props: ["links"]
})

new Vue({
  el: "#app",
  // custom static option , accessed using vm.$options.links
  links: [
      {text: "link1"},
      {text: "link2"},
      {text: "lin3"}
  ]
})

In the parent where the comp component is used make use of a