<script> export default { data() { return {

1.	<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, methods: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage() }}</span> </template>
Answer» //FancyButton template <template> <button class="fancy-btn"> <slot/> </button> </template> <style> .fancy-btn { border-radius: 8px; } </style> //Parent template <script> import FancyButton from './FancyButton.vue' export default { components: { FancyButton} } </script> <template> <FancyButton> <span> CLICK me! </span> </FancyButton> </template> >> Output he slot has similar usage with PROPS as it is down-way passing but it is used to pass a template fragment to a child component, and let the child component render the fragment it received within its own template rather than passing data. So, in the above code ‘<slot/>’ represents the content (template fragment) to be passed by the parent. Therefore, the ‘click me!’ text is what is to be replaced by the slot tag. As for changing the color of the text from the parent FALLTHROUGH ATTRIBUTE is used. Here the attribute is the style and the value of the attribute will be ’red’ assignment to the color attribute as shown below. <FancyButton> <span style="color:red">Click me! </span> </FancyButton> >> Output

<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, methods: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage() }}</span> </template>

Answer»

//FancyButton template <template> <button class="fancy-btn"> <slot/> </button> </template> <style> .fancy-btn { border-radius: 8px; } </style> //Parent template <script> import FancyButton from './FancyButton.vue' export default { components: { FancyButton} } </script> <template> <FancyButton> <span> CLICK me! </span> </FancyButton> </template>

>> Output

he slot has similar usage with PROPS as it is down-way passing but it is used to pass a template fragment to a child component, and let the child component render the fragment it received within its own template rather than passing data. So, in the above code ‘<slot/>’ represents the content (template fragment) to be passed by the parent. Therefore, the ‘click me!’ text is what is to be replaced by the slot tag.

As for changing the color of the text from the parent FALLTHROUGH ATTRIBUTE is used. Here the attribute is the style and the value of the attribute will be ’red’ assignment to the color attribute as shown below.

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment