How to use Vue.js slot components? and how to control child component from main component?

Question

I have been leaning about slot component of Vue.js. My goal is understanding about how to control components information useing slot. So, I tried to make simple code to understand slot component. But it didn't work.

I made two components, one is main component "ApptestMaster.vue" and another one is child component "ApptestChild.vue". I want to display the list information in ApptestMaster from ApptestChild. But, I only display the button. Please advise me!

↓this code is main component"ApptestMaster.vue"

<template>
    <v-app>
        <ApptestChild name="hoge">
            <ul>
                <li>List1</li>
                <li>List2</li>
                <li>List3</li>
            </ul>
        </ApptestChild>
    </v-app>
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import ApptestChild from '~/components/ApptestChild.vue'

@Component({components:{ApptestChild},})
export default class ApptestMaster extends Vue{
    
}
</script>

↓this is child component "ApptestChild.vue"

<template>
    <div>
        <v-btn name="hoge" @click="onClick">Click</v-btn>
        <v-slot v-if="display"></v-slot>
    </div>
</template>

<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'

@Component
export default class ApptestChild extends Vue{
    display:boolean=true;
    onClick(){
        this.display = !this.display
    }    

}
</script>

Phil Phil · Accepted Answer · 2020-07-21T22:56:09

You have the syntax wrong. There is no <v-slot> tag. The correct tag is <slot>

To use a slot in your ApptestChild, you should have the following template

<template>
  <div>
    <v-btn name="hoge" @click="onClick">Click</v-btn>
    <slot v-if="display"></slot>
  </div>
</template>

See https://vuejs.org/v2/guide/components-slots.html

How to use Vue.js slot components? and how to control child component from main component?

1 Answers