1.什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

创建组件的两种方式：1 全局组件 2 局部组件

Vue实例中的配置项（如：methods、filters、watch、computed、directives、生命周期钩子函数）都可以在组件中使用

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop给子组件下发数据，子组件通过事件给父组件发送消息。

组件实例的作用域是孤立的。

---------------------------差值表达式{{ 属性名 }} //最终被属性相对应的值替换-----------------------

-------------------------watch：{data中数据: 函数}只能监视data中的数据---------------------------

2.父组件通信于子组件

步骤：1).父组件提供一个数据（data中的数据）-->

             2).子组件标签上添加一个属性（格式=>:自定义属性名称="data中的数据"）-->

            3).子组件中通过props来接受父组件传来的数据（属性名称）-->

            4).可以使用props中的数据了（与data中数据的使用方式一致  html中{{ }},js中this.属性名）

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

**prop验证（不要忘记）

3.子组件通信于父组件

先来了解一下emit触发事件

步骤：1).父组件提供一个事件（方法）-->

             2).子组件标签上添加一个方法（如图fn），将父组件提供的事件名称（getChildMsg）作为这个方法的属性值，通过这种方式传递给子组件-->

             3).子组件通过调用自身函数（如图click事件），将$emit()写在函数内，使用它来触发传递过来的事件。this.$emit('fn','要传递给fn的参数')-->

            4).可以使用props中的数据了（与data中数据的使用方式一致  html中{{ }},js中this.属性名）

4.非父子组件的通信

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：var bus = new Vue() （bus是空vue实例，事件总线）

步骤：1).要接收数据的组件在bus上注册事件($on())-->

             2).要传递数据的组件在bus上触发事件($emit())

组件A中$emit的第二个参数就是$on中的第二个参数函数的参数

5.VUE组件的v-model

Vuex状态管理

在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。

实例中是使用this.$store,HTML中使用$store

补充：

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

给组件绑定原生事件：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如：

使用第三方插件的时候，遇到以下情况需要手动改动配置项

注意：|前后都不要有空格

使用编程式导航实现跳转(  this.$router.push()  )

通过点击li将geNewsInfo方法中的参数id，通过编程式导航传递给url

导入并使用公共组件的步骤：

注意路径 作为export default的一个导出对象 根据渲染位置，写在template里面