The slot Vue3

If you are familiar with the concept of slots in a Vue, you can transfer data between parent and child components. If you are familiar with the concept of slots in a Vue, you can transfer data between parent and child components. If you are familiar with the concept of slots, you can transfer data between parent and child components. You can also follow my wechat public number, Snail Quanzhan.

const app= Vue.createApp({    
    template: `<myform />`
})
app.component('myform', {methods: {handleClick(){            
            alert('handleClick')}},template: '
      
 
        < button@click ="handleClick"> Submit  
      
'})
const vm = app.mount("#root")
Copy the code

Here is a basic parent-child reference example. The parent component uses a single tag like input in H5. Sometimes we want to render the submission as a button, sometimes we just want to render it as a normal div. This is where slot comes into play, and we can write the code like this

const app= Vue.createApp({    

        
    template: Submitted ` < myform > < div > < / div > < / myform > < myform > < button > submit < / button > < / myform > `
})
app.component('myform', {methods: {handleClick(){            
            alert('handleClick')}},// Can not add @click mode to slot directly, can add span tag outside
    template: `
      
 
        
        
          
      
`
})
const vm = app.mount("#root")
Copy the code

In the case of slot, data binding is sometimes required. For a parent component, the parent component binds data, and the child component binds data. They don’t confuse each other

const app= Vue.createApp({    
    data(){        
        return {            
            f_data:'1234'}},template: `
       
        
       
      
        {{ f_data }} 
      `})
app.component('myform', {methods: {handleClick(){            
            alert('handleClick')}},template: `
      
 
        
        
          
      
`
    })
app.component('test', {template: `
      

        test component slot 
      
`
    })
const vm = app.mount("#root")
Copy the code

After slot is defined, the default is an empty string if nothing is passed between custom components, and if we want to add defaults, we can do this. Okay

const app= Vue.createApp({
    template: `<myform></myform>`
})
app.component('myform', {methods: {handleClick(){            
            alert('handleClick')}},template: '
      
 
        
        
        
          Here is the default value of slot 
          
      
'})
const vm = app.mount("#root")
Copy the code

Sometimes we want different slots to render different content. In this case, named slots are useful, as in this case

const app= Vue.createApp({    
    template: '
      
        // Must be through the template tag, 
        
        
      `})
app.component('layout', {template: `
      
 
        
       

        content
       
 
        
      
`
})
const vm = app.mount("#root")
Copy the code

Of course, we could also use the # shorthand

const app= Vue.createApp({    
    template: '
      
        // replace v-slot 
        
        
      `})
app.component('layout', {template: `
      
 
        
       

        content
       
 
        
      
`})
const vm = app.mount("#root")
Copy the code

Sometimes we need to render data in the child component and then define a different label in the parent component. In this case, we use the scope tag

const app= Vue.createApp({    
    template: '
       // Scope slot 
      
        < SPAN >{{slotProps. Item}} 
      '
})
app.component('mylist', {data(){        
        return {            
            list: [1.2.3]}},template: `
      
 
        
      
`})
const vm = app.mount("#root")
Copy the code