To pass a title to our blog post component, we can include it in the list of props this component accepts, using a props option: mponent blog-post props: 'title template: ' h3 title /h3 ' ) A component can have as many props as youd.
slot /slot /div /template e template div child-component p I'm injected content from the parent!
You can then populate the elements in that slot with e template div p I'm the child component!
In the template above, youll see that we can access this value on the component instance, just like with data.Named slots are simply slots with a name attribute slot to allow for namespaced content injection.p /child-component!- Renders "Hello from the child!" - /div /template script import ChildComponent from './e export default components: ChildComponent /script Named Slots, having one slot to inject content into is nice and all, but oftentimes it would be preferable to be able to inject various.To emit an event to the parent, we can call the built-in emit method, passing the name of the event: button Enlarge text /button Then on our blog post, we can listen for this event with v-on, just as we would with a native DOM.Defining a prop for each related piece of information could become very annoying: blog-post v-for"post in posts" v-bind:key" v-bind:title"post.Passing Data to Child Components with Props Earlier, we mentioned creating a component for blog posts.Say youre making a burger component.DOM Template Parsing Caveats Some html elements, such as ul, ol, table and select have restrictions on what elements can appear inside them, and some elements such as li, tr, and option can only appear inside certain other elements.Title" /blog-post Above, youll see that we can use v-bind to dynamically pass props.When a value is passed to a prop attribute, it becomes a property on that component instance.GET MY last book ember.
p /slot /div /template e template div!- Renders "Hello from the parent!" - child-component p Hello from the parent!