vue学习笔记：Vue组件

每个.vue组件都由3部分构成，分别是：

（1）template:组件的模板结构

（2）script:组件的javascript代码

（3）style:组件的样式

1、组件中的data不能是一个对象。必须是一个函数，通过return 返回一个数据对象：

<script>
export default{
    data(){
        return {
            userName:"张三丰"
        }
    }
}
</script>

2、组件中的方法任然写在methods中，方法中 的this表示当前组件的实例对象

methods:{
            changeName(){
            this.userName="李四强"
        }
    }

3、组件中的<template>节点中，只能有一个根元素，如果有多个会报错。

4、使用组件的三个步骤

（1）使用import语法导入需要的组件

import xxx from '@/components/xxx.vue'

（2）使用components节点注册组件

export default{
    components:{
        xxx//组件名称
    }
}

（3）以标签的形式使用刚才注册的组件

<div>
<xxx></xxx>
</div>

5、注册全局组件

使用components注册的组件是私有子组件，只能在当前组件中使用。如果需要所有组件都可以使用则需要注册全局组件 ，在vue项目中的main.js入口文件中，通过Vue.component()方法可以注册全局组件。

//导入需要全局注册的组件
import Count from '@/components/Count.vue'
//参数1：字符串格式，表示组件的“注册名称”，参数2：需要被全局注册的那个组件
Vue.component('MyCount',Count)

6、组件的自定义属性

props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大的提高组件的复用性，语法格式：

export default{
    props:['自定义属性A','自定义属性B'...]
}

（1）不要修改props中自定义属性的值，否则会在终端报错。

（2）props中自定义属性可以通过defaule来指定默认值，可以通过type指定数据类型。

export default{
    props:{
        count:{
            default:0,//默认值
            type:Number//强制声明数据类型
        }
    }
}

7、vue组件间样式冲突的问题

vue组件中定义样式时，默认是全局组件样式，多个组件如果有相同名称的class，则会引起样式冲突，在style 中增加scoped可以解决样式冲突。

<style scoped></style>

加了scoped后父组件的样式对子组件不生效，如果需要让父组件的某个样式对子组件生效可以使用“/deep/”，示例：

/deep/ h3{color:red}

应用场景：当使用第三方组件库的时候，如果要修改组件的默认样式，可以使用/deep/

8、组件的生命周期

（1）beforeCreate ：组件的props、data、methods尚未被创建，都处于不可用状态。

（2）created ：组件的props、data、methods已创建好、都处于可用状态，但是组件的模板机构尚未生成。

（3）beforeMount ：将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。

（4）mounted：已经把内存中的HTML结构成功的渲染到了浏览器之中。此时浏览器中已经包含了当前组件的DOM结构。

（5）beforeUpdate：数据发生变化后，将要将数据渲染到组件模板结构时触发。

（6）updated:数据发生变化后，已经将变化后的数据渲染到组件模板结构中。

（7）beforeDestroy：将要销毁此组件，此时尚未销毁，组件还处于正常工作状态。

（8）destroyed：组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除。

9、组件间的数据共享

（1）父组件向子组件传递值可以使用自定义属性。示例参考上面第6点。

（2）子组件向父组件传递值可以使用自定义事件，在子组件中通过$.emit定义事件，在父控件中绑定事件。

 （3）兄弟组件之间的数据共享，通过EventBus实现。1）创建eeventBus.js模块，并向外共享下个Vue的实例对象

2）在数据的发送方，调用$emit('事件名称',要发送的数据)方法触发自定义事件

3）在数据的接收方，调用bus.$on('事件名称'，事件处理函数)方法注册一个自定义事件