组件基础
组件是一个可复用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,在需要的使用的页面直接使用,不需要再引入
使用方法同局部混入本次整理共分为三个部分,此为二。
网友评论