Vue3.0学习笔记-全局组件和局部组件

根组件

Vue.createApp实际是建立一个Vue的实例，也就是相当于第一个根组件

全局组件及组件复用性

Vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件

弊端：只要定义了，处处可以使用，性能不高，但是使用起来简单

app.component('website',{
    template:` 
Website组件
`
})
app.component('describe',{
    template:` 
Describe组件
`
})

const app=Vue.createApp({
    template:`
        
        
    `
})

局部组件

创建局部组件：可以理解成声明一个对象变量，最外层使用大括号（花括号），然后里边和使用Vue.CreateApp( )时传递的参数是一样的。

注册局部组件：在vue.CreateApp（ ）方法里直接用components属性来声明就可以。

简单写法，components: { counter }

完整写法，需要给组件起一个名字 components: { counter:counter }

局部组件编写约定规则，组件命名用大驼峰命名法（首写字母大写），如 MyFirstComp；

注册组件名字用脊柱命名（-切割单词），如 my-first-comp （注意加引号）

const app = Vue.createApp({
    components: { 
         counter: counter, 
        'my-first-comp': MyFirstComp 
    },
    template: `
    
    
    `
const MyFirstComp = {
    data() {
        return {
            count: 0
        }
    },
    template: `
{{count}}
`
}

Demo18.html




    
    
    
    
    



    

        
根组件
        
Vue.createApp实际是建立一个Vue的实例，也就是相当于第一个根组件令
        
全局组件及组件复用性
        
Vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件
        
弊端：只要定义了，处处可以使用，性能不高，但是使用起来简单）
        
局部组件
        
创建局部组件：可以理解成声明一个对象变量，最外层使用大括号（花括号），然后里边和使用Vue.CreateApp( )时传递的参数是一样的。
        
注册局部组件：在vue.CreateApp（ ）方法里直接用components属性来声明就可以。
        
简单写法，components: { counter }
        
完整写法，需要给组件起一个名字 components: { counter:counter }
        
局部组件编写约定规则，组件命名用大驼峰命名法（首写字母大写），如 MyFirstComp；注册组件名字用脊柱命名（-切割单词），如 my-first-comp （注意加引号）