current position:Home>Definition of Vue slot

Definition of Vue slot

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

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 20</title>
    <script src="[email protected]"></script>
    <div id="root"></div>
    //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> `
        // A named slot 
        template:` <div> <slot name="header"></slot> <div>content</div> <slot name="footer"></slot> </div> `
            handleClick() {
        // Normal slot , The binding event 
        template:` <div> <input /> <span @click="handleClick"> <slot>defalt value</slot> </span> </div> `

copyright notice
author[@huihui_ new],Please bring the original link to reprint, thank you.

Random recommended