关于Vue组件知识的总结与梳理！！ 适合对vue组件概念比较模糊或还不太了解的同学！！

这是一篇关于vue组件内容的大概介绍和总结，希望对大家有用！

组件

Vue 1.x中

全局组件：

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

局部组件：

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

Vue 2.x

直接在vue实例的components里

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

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

组件构造：

‘注册名称’：注册模板

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

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

父子组件间的通信：

1. 通过props向子组件传递数据
2. 通过$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>

props也可以以对象形式存储//更推荐如此

type为类型，default为默认值，required要求是否一定要赋值

类型是对象或数组时，默认值必须是函数

$emit(子传父)

子组件methods中自定义事件

methods:{子组件自定义函数内部加一句 this.$emit(‘父组件中@的事件名’,值)}//提交的事件名不要大写

父组件中，通过v-on即@，来监听子组件事件

父子组件的相互访问

父组件访问子组件：使用$children、$refs

子组件访问父组件：使用$parent、$root

$children

this.$children是一个数组类型，包含所有子组件对象//一般不常用

$refs、$ref

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。

例如给标签加上 ref="one"

接下来便可如下调用 this.$refs.one 指到这个方法，之后再对该元素调用方法即可

$parent

如果访问到了root，则为Vue而不是Vue component//一般不推荐使用
然后通过 .属性或方法来进行操作

$root

直接访问根，即root，
然后通过 .属性或方法来进行操作

觉得该篇文章对你有帮助的请献上你们可爱的赞噢~

欢迎大家关注我的公众号：Smooth前端成长记录
公众号同步更新CSDN博客内容，想方便阅读博客的C友可以来关注我的公众号以便获得更优良的阅读体验~