#160 #160 2#160 #160 在mainjs中全局引入，先import再注册到VUE中 #160 #160 #160 #160 3#160 #160 接着就可以在任何页面直接使用自己定义的组件 #160#160#160#；最近在做一个vue的项目，独立封装树形组件先说一下项目需求1项目原型此树形结构分为三级根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中二级节点中有不可。

动态修改的vue2能用vue3是用于vue的自定义组件封装动态修改的，因此是封装的组件组件是数据和方法的封装，就是指一组数据可以提供一些操作实现一些简单的功能，比如用户查询组件；props传入参数，不建议对它进行操作，如果要操作，请先在子组件深拷贝如果你是用JSONstringify， JSONparse方法深拷贝需注意比如某些子组件的click事件，避免高耦合，逻辑最好放在父组件中，子组件只是一个承载体这样既；正常来说其实这个组件中是不需要写逻辑的，但是这里有个问题就是vue20中给自定义组件设置原生事件一定要加native修饰符，那如果使用的时候父组件忘记了呢所以这里给这个组件设定了个点击事件 这个change方法里其实只做了一；其实说白了，vmodel就是change和value的结合体废话不多说，下面就来看一下在vue中如何封装自定义的input组件符号打不出来了，将就着看吧如果还是不明白 atters和 listeners是怎么回事的可以看一下vue官网中的介绍；elementUI中的组件本身是已经经过封装的便于开发，但是由于项目使用次数过多，为了更简便的统一使用将其进行封装复用初学者可参考官方文档学习简单示例；1引入swiper这里引入的是541版本在cmd命令行 cnpm install save swiper@541 2Swiper组件的封装封装方法参考swiper官网===srcviewsFilmSwipervue#1603在Film组件中使用swiper，并为轮播图；也可以使用 createVNode + render 这对组合 也支持直接导入函数使用 import Toast from #39@srccomponentsToast#39注 本篇文章使用了 typescript ，如果你是使用的 javascript，只需要把类型去掉即可。

对于Vue20来说，是的Vue20基于option api，设计思路就是通过配置的方式来实现功能，从他推崇的SFC单文件组件上看，就是推荐将模板template， 行为script， 样式style封装到一个组件内，是一种基于。

这时候，Vueextend + vm$mount 组合就派上用场了indexvue 跟他同级目录的 indexjs mainjs中注入 使用在testvue中 来个升级版，写个类似alert的组件 noticevue 跟noticevue同级目录的 indexjs；具体做法如下原始写法其实很简单，修改一点就好了，将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分 初始化时我们将更改为希望助你一臂之力，正在奋斗的路上，加油；import AddUsers from quot@componentsAddUsersvuequot export default name quotUsersViewquot， components AddUsers， ， * 当组件被激活的时候 ， 可以为组件的菜单被点击到的时候触发* activatedfunction consolelog#39我；vbind=quot$attrsquot 的妙用是在创建更高级别的组件，在封装第三方组件时，可以自动将在父作用域中使用的 vbind 的属性自动绑定，并向下传入被封装的使用了 vbind=quot$attrsquot 的组件一段摘自 vue 官网的介绍 例如我们。

1在components下新建一个RemoteSearchvue文件或者新建一个文件夹，命名RemoteSearch，下面加入一个indexvue文件命名都是自己随意的2RemoteSearchvue文件内容如下 3使用；举个栗子上面创建了一个最简单的vue组件 假设我们导入该组件名字是HelloWorld 就是这么简单，上面用到了vue的插件，自定义vue插件需要导出一个install方法 使用就更简单了 在项目中的任意vue组件可以通过 this$component。