vue-class-component教程 vuex-class

详解如何用VUE写一个多用模态框组件模版

对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个常用的模态框组件提供给大家，希望能帮助到您！

懒癌患者直接粘贴即可 Modal.vue组件

新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用

import Modalfrom "./Modal.vue";

const components = {

install: function (Vue) { Modal);

}}

//导出组件

export default components;

Index.vue中调用

效果如图 模态框-1.gif

如果只需要一个确定按钮，只需要在调用的时候，这么写就好了

如图 模态框-2.gif

可能并不是特别完美，如果您发现有缺点，还请不吝赐教！

Vue3_15（全局组件，局部组件，递归组件）

例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件

案例------我这儿封装一个Card组件想在任何地方去使用

使用方法

在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用

其次调用 component 个参数组件名称 第二个参数组件实例

使用方法

直接在其他vue页面 立即使用即可 无需引入

就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件

应为B组件只能在A组件内使用 所以是局部组件

如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏

案例递归树

在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

template

TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

Vue.js怎样把递归组件构建为树形菜单

这次给大家带来Vue.js怎样把递归组件构建为树形菜单，Vue.js把递归组件构建为树形菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

在Vue.js中一个递归组件调用的是其本身，如： {

template: `

});

递归组件常用于在blog上显示注释、嵌套的菜单，或者基本上是父和子相同的类型，尽管具体内容不同。

现在给您演示一下如何有效地使用递归组件，我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。

数据结构

一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中，我们将使用树状结构，其中每个节点都是一个对象：

一个 label 属性。

如果它有子节点，一个 nodes 属性，则它是一个或多个节点的数组属性。

与所有树结构一样，它必须有一个根节点，但可以无限深。

let tree = {

label: 'root',

nodes: [

{label: 'item1',

nodes: [

{label: 'item1.1'

},

{label: 'item1.2',

nodes: [

{label: 'item1.2.1'

}]

}]

},

{label: 'item2'

}]

}递归组件

让我们做一个递归组件来显示我们的称为 TreeMenu 的数据结构。它只显示当前节点的标签，并调用自己来显示任何子节点。文件名：TreeMenu.vue，内容如下：

如果你使用一个组件递归，必须先给 做一个全局的定义，或者，给它一个 name 属性。否则，任何子组件将无法进一步调用它，你会得到一个不确定的“undefined component error”的错误提示。

基本事件

与任何递归函数一样，你需要一个基本事件来结束递归，否则渲染将无限期地继续下去，终会导致堆栈溢出。

在树菜单中，当我们到达一个没有子节点的节点的时候，我们希望停止递归。你能通过 v-if 做到这一功能，但我们选择使用 v-for

将隐式地为我们实现它；如果 nodes 数组没有任何进一步的定义 tree-menu 组件将被调用。template.vue文件如下：

使用用法

我们现在如何使用这个组件？首先，我们声明一个Vue实例，具有一个数据结构包括data属性和定义过的treemenu组件。app.js文件如下：

import TreeMenu from './TreeMenu.vue'

let tree = {

...

}new Vue({

el: '#app',

data: {

tree

},

components: {

TreeMenu

}})

请记住，我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件，使用根 nodes 属性来props：

在视觉上识别子组件的“深度”是很好的，这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。

这是通过增加一个depth prop定义，通过 TreeMenu 来实现。我们将使用这个值动态地将内联样式与转换绑定在一起：将使用transform: translate的CSS规则为每个节点的标签，从而创建缩进。template.vue修改如下：

depth 属性在主模板中从零开始。在上面的组件模板中，你可以看到每次传递到任何子节点时这个值都会递增。

:label="tree.label"

:nodes="tree.nodes"

:depth="0"

>

注意：记得 v-bind depth值以确保它是一个JaScript数字类型而不是字符串。

展开/收起

由于递归数据结构可能很大，所以显示它们的一个很好的UI技巧是隐藏除根节点以外的所有节点，以便用户可以根据需要展开或收起节点。

为此，我们将增加一个局部属性showChildren 。如果他的值为False，子节点将不会被渲染。此值应通过点击节点切换，所以我们需要使用一个单击事件的方法 toggleChildren 来进行管理。template.vue文件修改如下：

总结

这样，我们就有了一个工作树菜单。用来画龙点睛的一个方法是，你可以添加一个加号/减号图标，这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

阅读：

JSONAPI在PHP中的使用方法

VueRouter的导航守卫应该怎么使用

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

在Vue2.0中如何实现组件及父子组件通信

本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

什么是组件？

vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。

使用组件的好处？

1、提高开发效率

2、方便重复使用

3、简化调试步骤

4、提升整个项目的可维护性

5、便于协同开发

vue中的组件

vue中的组件是一个自定义标签，vue.js的编译器为它添加特殊功能

vue中的组件也可以扩展原生的html元素，封装可重用的代码

组件的基本组成：样式结构，行为逻辑，数据

注册组件

全局注册

可以在任何模板中使用，使用之前要先注册

语法：使用组件名，选项对象)

组件名命名约定：驼峰，烤串

在html中使用组件：使用烤串命名法

例如，注册{}),使用的时候

自定义下拉框

使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。

组件.png

局部注册

在组件实例中通过选项对象注册，只在所注册的作用域中使用

自定义下拉框

局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。

组件.png

父子组件间通信

父组件给子组件通信

父组件===》子组件（用props）

组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。

也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加 一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。

自定义下拉框

页面效果

props传值.png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容

2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"

3、在触发子组件事件的时候，$emit 通知父组件 this.$emit("receive",item);

4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}

看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。

自定义下拉框

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Django与Vue语法中存在冲突问题如何解决

在nodejs中如何实现爬取网站图片

有关ES6/JaScript使用技巧（详细教程）

使用微信小程序如何实现动态设置placeholder提示文字

Vue核心知识-Vue的组件之组件的继承

Vue.extend( options )

参数：

{Object} options

用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

下例中，

component2 继承 component，再将 component2 在 vue 实例中注册使用。

观察 mounted 执行先后，发现控制台一次显示：

comp mounted

comp2 mounted

instance mounted

说明组件的执行顺序也是如此。

有一个功能完善的公用组件，当需要对组件进行扩展时，会用到 extend，而不需要重新写一个组件。