Tutorial by Examples | RIP Tutorial

Using Single Slots

Single slots are used when a child component only defines one slot within its template. The page component above uses a single slot to distribute content. An example of the page component's template using a single slot is below: <html> <head> <title>Page Title</t...

Vue.js • Slots

What are slots?

Slots offer a convenient way of distributing content from a parent component to a child component. This content can be anything from text, HTML or even other components. It can be helpful sometimes to think of slots as a means of injecting content directly into a child component's template. Slots ...

Vue.js • Slots

Using Named Slots

Named slots work similarly to single slots but instead allow you to distribute content to different regions within your child component template. Take the page component from the previous example but modify it's template so it is as follows: <html> <head> <title>Pag...

Vue.js • Slots

Using Slots in Vue JSX with 'babel-plugin-transform-vue-jsx'

If you're Using VueJS2 and like to use JSX along with it. In this case,to use the slot, the solution with example is below.We have to use this.$slots.default It's almost like this.props.children in React JS. Component.js : export default { render(h) { //eslint-disable-line return ( ...

Vue.js • Slots