一、了解组件

1、使用组件的目的之一是希望可以尽可能多的重用代码
2、自定义组件中会包含html、css和js，实现起来并不容易，也可能在多次使用时导致冲突，所以国际规范Web Components通过封装好功能的定制元素来解决上述问题。
3、组件是可复用的Vue实例，封装标签、样式和JS代码
在这里插入图片描述

二、Vue组件基础使用

HTML文件中（全局组件）
1、注册语法

Vue.component('组件名称', {
      data:组件数据,
      template:组件模板内容
 })

Vue.component('counter',{
            data: function(){
                return {
                    count:0
                }
            },
            template:'<button @click="count++">点击了{{count}}次</button>'
        })
        var vm=new Vue({
            el:'#app',
            data:{

            }
        });

2、组件用法

<div id="app">
    <button-counter></button-counter>
</div>

组件可以实现重用，重用后每个组件都是独立的，互相不会影响

注意事项：

data必须是一个函数，如果改为对象会报错
组件模板内容必须是单个跟元素

脚手架做法：
1、创建组件–文件名.vue
2、引入组件（全局在main.js中）
import 组件对象 from 组件所在文件的地址
3、
a.全局注册组件（在main.js中注册）
语法：Vue.component(“组件名”，组件对象）
在这里插入图片描述
b.局部注册组件（较多使用）
语法：component：{
“组件名”：组件对象
}
若key和value变量名同名，可简写：
component：{
组件名
}
4、在需要组件的地方将组件名当作标签使用

给style标签添加scoped属性：实现Vue组件内样式，只针对当前组件内标签生效
原理：会自动给标签添加data-v-hash值属性，css中的选择器也都会自动添加属性选择器

三、Vue组件通信

（一）父组件向子组件传值

1、明确父和子分别是谁，在父引入子（被引入的是子）
2、在父组件中可能会多次引用子组件，为了使每次组件显示不同的数据信息，所以使用父组件向子组件传值
3、步骤：
（1）子组件 - props - 设置变量（数组）（准备接收）
（2）父组件 - 在使用子组件时向子组件传值
两种方式：a.直接用字符串传值 b.用变量进行传值

4、父向子配合循环进行传值
在这里插入图片描述

单向数据流：从父到子的数据流向

（二）子组件向父组件传值

1、前提：子组件修改父亲传入的数据不通知父亲，会导致数据的不一致性；vue规定props“本身”是只读的，不允许重新赋值
2、如何实现：
父组件内，给组件@自定义事件=“父methods中的函数”
在这里插入图片描述

子组件内，恰当时机this.$emit(‘自定义事件名’,值）
在这里插入图片描述

（三）跨组件传值

在这里插入图片描述
1、语法：

src/EventBus/index.js --创建空白对象Vue对象并导出 import Vue from ‘vue’
在要接收值的组件中import eventBus from ‘EventBus文件夹所在的路径’（注：路径写到EventBus文件夹，系统会自动找到index.js文件，但如果文件名不叫index.js，则需写上这个文件所在的地址），还要添加created生命周期函数，在其中使用固定方法$on，绑定一个自定义事件名
在要传递值的组件中 eventBus.$emit(‘事件名’,值)