Today, when xiaobian was hanging out on the Internet, I found that the development of the front end in the past few years can not do without the concept of components, before xiaobian came into contact with components, basically are like this. You can also follow my wechat public number, Snail Quanzhan.

const app= Vue.createApp({    
    template: `
       
      `
    })
app.component('input-item', {template: `<div> <input /></div>`
})
app.component('common-item', {template: `<div>Hello World</div>`
})
const vm = app.mount("#root")
Copy the code

So this is a text box that’s displayed on the page, a line of text, and at this point, if we want to switch between the reality and the hidden relationship between the two elements with a button, we can change the code to look like this

const app= Vue.createApp({    
    data(){        
        return {            
            currentItem: 'input-item'}},methods: {handleClick(){            
            if(this.currentItem === 'input-item') {this.currentItem = 'common-item'            
            }else{                
                this.currentItem = 'input-item'            
            }            
            // This can also be done with the ternary operator. You can also refer to binding class or style bindings
            // this.currentItem = this.currentItem === 'input-item'? 'common-item':'input-item'}},template: `
       
       })
app.component('input-item', {template: `<div><input /></div>`})
    app.component('common-item', {template: `<div>Hello World</div>`})
const vm = app.mount("#root")
Copy the code

With dynamic components, the same requirements, our code can be written like this

// Dynamic components: Dynamically switch component implementations at any time based on data changes, combined with the component tag
const app= Vue.createApp({    
    data(){        
        return {            
            currentItem: 'input-item'}},methods: {handleClick(){            
            if(this.currentItem === 'input-item') {this.currentItem = 'common-item'            
            }else{                
                this.currentItem = 'input-item'}}},template: '// To cache data before the text box 
      
        < Component :is="currentItem" /> 
       < button@click ="handleClick"> Toggle '
})
app.component('input-item', {template: `<div><input /></div>`
})
app.component('common-item', {template: `
      

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

In the first block of code, components that introduce custom tags can be directly displayed. This is called synchronous components, and of course asynchronous components, mainly to solve the problem of first-screen loading speed, with the defineAsyncComponent in Vue3, like this

const app= Vue.createApp({    
    data(){        
        return {            
            count: 1}},mounted(){ 
        // The concept of DOM exists only when elements are mounted early in this lifecycle or later
        console.log(this.$refs.countele)  // <div>1</div>        
        this.$refs.commele.sayHello()    
    },    
    template: `
      
 
       

        {{ count }}
       
 
        
      
`
})
app.component('common-item', {methods: {sayHello(){           
            alert('hello')}},template: `<div>Hello World</div>`
})
const vm = app.mount("#root")
Copy the code

Privide Inject: The way a component passes data to its child components

We can do this when passing data from a component to its children

const app= Vue.createApp({    
    data(){        
    return {            
        count: 1}},template: `
      
 
        
      
`
})
app.component('child', {props: ['count'].template: `
      
 
        
      
`
})

app.component('child-child', {props: ['count'].template: `
      

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

Obviously, this is cumbersome, with privide Inject, we can write this

const app= Vue.createApp({    
data(){        
    return {            
        count: 1}},// provide:{ 
// You can't call data directly. If necessary, you need to write it as a function
// count:1
/ /},
// Provide (){// Provide (){// Provide (){// Provide (){
    return {            
        count: this.count        
    }    
},    
template: Child / ` < div > < > < button @ click = "count + = 1" > add < / button > < / div > `
})
app.component('child', {template: `
      
 
        
      
`
})

app.component('child-child', {inject: ['count'].template: `
      

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