Vue3 组件对象使用基础技术

Vue中，对组件的定义及使用采用了分开策略，以下对组件使用基础加以整理。

每一场雪--2021-11-8.jpg

1. 利用“Vue组件配置对象”

//直接创建配置对象
var App={
    data(){
        return {title:'hello'}
    },
    methods:{
        change(){
            this.title="world"
        }
    }
    /*
    ,
    components:{},
    其它内置属性及方法...
    */
}
//注：这是根组件类，或子组件类的创造语法

//利用配置对象，直接创建应用实例（Vue组件）
var app=Vue.createApp(App)
app.mount("#app")

2. 创建“配置类”,再实例化一个配置对象

//创建配置类
class App{
    methods={
        change(){
            this.title="world"
        }   
    }
    data(){
        return {title:'hello'} 
    }
    
}
//or...
function App(){
    this.data=function(){
        return {title:'hello'} 
    }
    this.methods={
        change(){
            this.title="world"
        }
    }
}

//利用配置类创建组件对象，再创建应用实例（Vue组件）
var app=Vue.createApp(new App())
app.mount("#app")

3. 子组件对象的定义及注册技术：

（1）定义及注册分开方式：

//定义一个配置对象
var CafeItem={
    template:'<h2>玛奇朵<h2/>'
}

var App={
    //核心代码：注册子组件，然后可以html模板中使用“<cafe-item></cafe-item>”
    componets:{CafeItem:CafeItem},
    
    data(){
        return {title:'hello'}
    },
    methods:{
        change(){
            this.title="world"
        }
    }
}

var app=Vue.createApp(App)

app
.mount("#app")

(2) 定义注册一体式：

var app=Vue.createApp(App)
        // 直接在组中定义及注册，然后在模板中就可以使用<cafe-item></cafe-item>
        app.componet('cafe-item',{
            template:`<h2>玛奇朵</h2>`
        })

        app
        .mount("#app")