vue知识集锦(二）

组件基础

组件是一个可复用Vue的实例，且带有一个名字。所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。当你多次复用组件时，每个组件会单独维护自己的事件，因为你每用一次组件，就会有一个它的新的实例被创建。

一个组件的data必须为一个函数， 这样才可以保障每个被复用的组件之间的独立性。

组件注册分为全局注册和局部注册，全局注册可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。在各自内部也都可以相互使用，然而局部注册的组件在其子组件中不可用。

全局注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

局部注册

事件名：不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

编译的作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

父子组件之间传递数据：https://blog.csdn.net/xiasohuai/article/details/80663739

1.父组件向子组件传递数据：先定义子组件并在子组件中定义props，然后在父组件中引入子组件并传入子组件需要的值

2.父组件调用子组件的方法：在被使用的子组件标签里自定义一个ref名称，然后在父组件的方法里写入 this.$refs.方法名（ref值） 可以获取到子组件的方法。

3.子组件向父组件传值并调用方法：先在子组件中创建一个按钮，绑定一个点击事件。在相应点击事件的里通过$emit触发父组件里的自定义事件并且传一个参数给父组件。最后在父组件的子标签里监听此事件并添加一个响应此事件的方法。

vue的生命钩子

动态组件

不同组件之间动态切换可以使用动态组件，通过在<componet> 元素加一个特殊的 is 特性来实现。

限制number只能是数字

混入：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。混入一般有两个用途，1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

普通使用：数据对象合并

数据对象合并：当组件和混入对象含有同名选项时数据对象在内部会进行递归合并。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入：混入也可以进行全局注册。慎用！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。1.我们可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

全局混入的执行顺序要前于混入和构造器里的方法

2.在main.js中定义mixin，在需要的使用的页面直接使用，不需要再引入

使用方法同局部混入

本次整理共分为三个部分，此为二。