Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you render VNodes in a Vue template?

I have an situation where I have a render function that passes some data to a scoped slot. As part of this data I'd like to include some VNodes constructed by the render function that could optionally be used by the scoped slot. Is there anyway when writing the scoped slot in a template to output the raw VNodes that were received?

like image 440
Emanon Avatar asked Mar 18 '18 20:03

Emanon


People also ask

Can I use JSX in Vue?

If you have worked with JSX before, do note that Vue JSX transform is different from React's JSX transform, so you can't use React's JSX transform in Vue applications. Some notable differences from React JSX include: You can use HTML attributes such as class and for as props - no need to use className or htmlFor .

Can you use console log in Vue?

Console log can be used in Vue js application, however, it is disabled. The reason for this is that it is not a good practice to use methods on the console. But, if you want to test something, for example, if a method gets the data, by default, you can't use a console log to check this.

What does template do in Vue?

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

How do I render components in Vue?

Each Vue component implements a render function. Most of the time, the function will be created by the Vue compiler. When you specify a template on your component, the content of this template will be processed by the Vue compiler that will return a render function.


1 Answers

You can use a functional component to render the vnodes for that section of your template:

<some-component>
  <div slot-scope="{ vnodes }">
    <vnodes :vnodes="vnodes"/>
  </div>
</some-component>
components: {
  Vnodes: {
    functional: true,
    render: (h, ctx) => ctx.props.vnodes
  }
}
like image 118
Decade Moon Avatar answered Sep 30 '22 17:09

Decade Moon