2022/12/15 vue-component

50 阅读1分钟

定义并注册组件

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的子类实例