定义并注册组件
app.component('my-component', { /* ... */ })
// 定义并注册组件
const app = Vue.createApp({...})
app.component('my-component', {
template: `<p> {{name}} </p>`,
data() {
return {
name: 'phoney'
};
},
methods: {
...
},
})
const vm = app.mount('#app')
<!-- 使用组件 -->
<div id="app">
<my-component></my-component>
</div>
通过这个示例我们可以看出构造组件的options对象和构造vue实例的options对象基本一致,只是对于组件实例而言,不需要el属性,因为组件的使用方式是直接在html中进行占位,而不需要像vue实例那样,指定挂载实例的位置。
一个单页应用就是一个 vue 的实例
每个自定义组件就是一个 vueComponent 实例,vueComponent 类继承自 vue。所以所有的Vue组件都是Vue的子类实例