scrimba
10 - Slots intro
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

10 - Slots intro
AboutCommentsNotes
10 - Slots intro
Expand for more info
index.js
run
preview
console
import Vue from 'vue';

const MyComponent = {
template: `
<div style="border: 2px solid #41B883; padding: 10px;">
<p style="color: tomato; border: 1px dotted tomato;">
dynamic content goes here
</p>
</div>
`,
data() {
return {
myValue: 'instance data'
};
}
};

new Vue({
el: '#app',
data: {
message: 'Hello world'
},
components: {
MyComponent
}
});
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html
Sirven cuando queremos agregar contenido dinámico dentro de un componente. Al definir un componente podemos darle contenido default (fallback content). Existe una noción de “parent scope” y un “child scope”. El contenido del slot tiene acceso al scope del padre El scope del hijo será determinado cuando defines el componente ">
-4:06