这是一篇关于vue组件内容的大概介绍和总结，希望对大家有用！
(还没更新到vue3)

组件

Vue 1.x中

全局组件：

创建组件构造器调用Vue.extend
注册组件调用Vue.component
使用组件

局部组件：

创建组件构造器
在vue实例内部定义属性components，然后 cpn使用的组件名：组件构造器
使用组件

Vue 2.x

直接在vue实例的components里

组件不能访问vue实例的数据

因此组件有自己的data数据集，而且必须用函数返回的形式定义

组件构造：

‘注册名称’：注册模板

而对于直接’注册名称’：注册模板中写注册模板，会造成不美观，因此可以在外部定义组件格式

外部<template>定义，加上id，之后直接#id即可

父子组件间的通信：

通过props向子组件传递数据
通过$emit Events,即事件向父组件发送信息

props(父传子)

在子组件中定义props

props=[自定义变量名1，自定义变量名2]，然后在该模板上设置属性，:自定义变量名=“父组件变量”

父组件

const app=new Vue({
    el:"#app",
    data:{
        message:"你好啊",
        movies:['海王','海贼王','海尔兄弟']
    },
    components:{
        cpn//定义子组件有cpn
    }
})

子组件

const cpn={
    template:'#cpn',//引用下面id为cpn的组件模板
    props:['cmovies','cmessage'],
    data(){
        return {}
    },
    methods:{}
}

html网页内容

<template id="cpn">//定义id为cpn的组件模板内容，即传给了上面的子组件模板格式
    <div>
    	<p>{{cmovies}}</p>
		<h2>{{cmessage}}</h2>
    </div>
</template>

//网页主体内容
<div id="app">
    <cpn :cmovies="movies" :cmessage="message"></cpn>//通过子组件中定义的props方法将父组件中的message和movies变量内容传给子组件的cmessage和cmovies
</div>