1. 利用Vue的脚手架新建一个简易版的Vue项目my-project vue init webpack-simple my-project二，就是按照提示 cd my-project npm i npm run dev三，开始写自己的组件。 为了方便管理更多的组件，我们这里在src目录下面新建了一个myPlugin的目录，在这里面存放我们开发的组件， 我这里是写了两个组件，一个是cropper，一个是Pagination，scss用来存放样式，有封装的js方法就建个js目录，没有就没必要。然后再建一个你写的vue文件，和...
很少有开发人员在上手编写 Vue 组件时，就考虑到将组件开源化的问题。大部分开发者都是为了自己的项目编写组件，在某些场景下决定通过编写组件的方式处理问题。但另一方面，由于大部分组件都是从某个特定场景开始逐步演化出来的，因此许多组件在 Vue 生态系统中表现并不“出色”。作者将通过本文为读者介绍构建优秀 Vue 组件的最佳实践。从一方面来说，这是种理想的方式，它意味着 Vue 开发者能够使用越来越多的开源组件（在 npmjs...
Vue.js 组件实例的作用域是相互独立的，不同组件之间的数据不能互相访问，组件有父级组件、子级组件、兄弟组件，如何选择组件之间的通信方式？针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解，对比各自的区别以及使用场景。1. props子组件使用props 接收父组件传递的值，子组件通过 $emit ，让父组件接收事件，改变父组件的data里面的值；代码示例：<!--父组件--><template> ...
然后，VueComponent实例的渲染Watcher再调用updateComponent函数重新render：在$options中取到render函数执行： 下面这个keepalive组件的render函数对于理解keepalive非常重要，在keepalive组件render的时候，先会拿到slot插槽元素，通过getFirstComponentChild函数获取到slot中的第一个元素（组件A）的vnode，获取到第一个元素的componentOptions中的tag，通过keepalive组件中的include和exclude条件判断如果不满足，rende...
然后，VueComponent实例的渲染Watcher再调用updateComponent函数重新render：在$options中取到render函数执行： 下面这个keepalive组件的render函数对于理解keepalive非常重要，在keepalive组件render的时候，先会拿到slot插槽元素，通过getFirstComponentChild函数获取到slot中的第一个元素（组件A）的vnode，获取到第一个元素的componentOptions中的tag，通过keepalive组件中的include和exclude条件判断如果不满足，rende...
代码 定义局部组件，和模板抽取的两种方式 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>vueTest</title><style type="text/css">* {margin: 0px;padding: 0px;}</style></head> <body> <div id="app"><myheader></myheader> </div> <div ...
1、this.$root.xxx // 改变`xxx`用到的地方可以响应式变化2、props// 存在祖先和后代的限制3、eventBus // **不**存在祖先和后代的限制4、this.$observe // 可以把数据变为响应式的5、provide/inject // 存在祖先和后代的限制6、vuex // as we know7、浏览器缓存 // localstorage... 有时可以利用8、window // 有时可以利用9、this.$attrs// 存在祖先和后代的限制10、$parent / $children与 ref
一、递归组件组件在它的模板内，可以递归的调用自己，只要给组件设置name的选项就可以 <div id="app"><child-component :count="1"></child-component></div><script type="text/javascript">Vue.component(child-component,{name:child-component,props:{count:{typeof:Number,default:1}},template:<div class="child"> <child-component :count="count+1" :v-if="count<3" ...
当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到sloat,这个过程叫做内容分发。 props传递数据，events触发事件，sloat分发内容，就构成了vue组件的3个API来源。 一、slot的用法 单个slot 在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot(插槽)，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。 <div id="app"><child-component><p>这是分发内容</p><p>更...
组件是Vue最核心的功能。 使用props传递数据——父组件向子组件传值 基本用法 props的值可以是两种，一种是字符串数组，一种是对象 数组 <div id="app"><my-component message="来自父组件的值"></my-component></div><script type="text/javascript">Vue.component(my-component,{props:[message],template:<div>{{message}}</div>})var app = new Vue({el: #app,data: {}})</script>最后的渲染结果为<div id="app"><div>{{mes...
一、介绍 随着互联网的发展 功能性开发 已经无法满足我们对于前端的需求，这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景：公司内部组件库的开发，个人组件库的开发，与项目解耦，多项目中使用同一组件，只需维护一套组件库 那就让我们开始吧～ 二、Storybook 1. 介绍： Storybook 是用于UI开发的工具。通过隔离组件，可以更直接、更快、更轻松地进行开发。这使您可以一次处理一个组件。您可以开发整个UI，而...
什么是组件化？ 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及...
教程：基于Verdaccio搭建一个私有化 Npm 库, 并上传本地Vue组件库开发环境： 1、Node.js (v12.18.3) 2、Vue CLI (v4.5.12) 3、Verdaccio (v4.12.0)一、创建Vue项目 可以自行使用vue CLI （3.x以上）或其他IDE来创建新的vue 3项目。 1、安装vue cli。 ??使用命令行安装: npm install -g @vue/cli ?? （注意：先把npm的源设置为淘宝源） 2、创建vue项目。 ??（1）使用vscode打开一个空的文件夹。 ??（2）在终端输入：vue create my-a...