current position:Home>Definition of Vue slot

Definition of Vue slot

2022-04-29 04:26:44@huihui_ new

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 20</title>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //slot  slot 
    // Data properties called in the parent template , The data in the parent template is used 
    // Data attributes called in the sub template , The data in the parent template is used 
    //slot Default settings 
    // Definition of named slot 
    const app = Vue.createApp({
    
        data() {
    
            return {
    
                text:' Submit '
            }
        },
        template:` <myform> <div>{
     {text}}</div> </myform> <myform> <button>{
     {text}}</button> </myform> <myform> </myform> <layout> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </layout> `
    });
    app.component('layout',{
    
        // A named slot 
        template:` <div> <slot name="header"></slot> <div>content</div> <slot name="footer"></slot> </div> `
    });
    app.component('myform',{
    
        methods:{
    
            handleClick() {
    
                alert('123')
            }
        },
        // Normal slot , The binding event 
        template:` <div> <input /> <span @click="handleClick"> <slot>defalt value</slot> </span> </div> `
    });
    app.mount('#root');
</script>
</html>

copyright notice
author[@huihui_ new],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/117/202204270551339987.html

Random recommended