vue获取输入框得内容_「vue基础」深入学习如何编写 Vue 组件

大家好，上一篇文章「vue基础」手把手教你编写一个简单的 Vue 组件，我们一起学习了如何编写一个简单的自定义组件，这篇文章我们将继续学习组件其它方面的内容，主要涉及组件的生命周期、属性设置、父子组件传值、槽等相关内容。

组件生命周期

如果你以前使用过React，那么你已经熟悉了组件相关的生命周期的概念。所谓的组件生命周期，就如同人一般从出生到消亡一样，有几个关键的阶段，在这几个关键的阶段，我们可以编写相应的代码进行一些逻辑的处理，比如在初始化组件时，我们通过Ajax的形式进行数据请求。

官方文档有一个比较简单通俗的图，用来解释组件生命周期，示意图如下：

关于这几个生命周期的方法，目前我们常用的就是以下几个：

• created： 我们常在这里进行Ajax的数据请求，用来获取数据。

• mounted： 当组件完全被渲染至DOM中，在这里那可以操作相关的DOM内容，比如上篇文章的例子，我们对用户数据进行排序。

• beforeDestroy： 在组件从DOM中被删除之前触发相关逻辑，在这里我们一般做些对象的释放清理工作。

这里我需要格外强调下，created 和 mounted 的区别：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

接下来还是继续我们上篇文章的例子，如我们需要通过API获取数据，我们可以这样修改代码：

这样，组件实例化创建成功后，就会通过API发起 Ajax 数据请求，并将数据结果返回给 data 的人员属性信息。

通过属性 props 配置数据展示

通过这些内容的学习，我们清楚的认识道UI组件的重用特性确实很方便，但是其真正魔力在于，组件的可配置性，我们可以自定义属性用于接收值的传递，可配置性大大增加了组件的灵活些，比如以下例子，我们在上篇头像组件里增加了一个src的属性，如下示例所示：

属性的默认值和相关验证配置

Vue 让我们配置属性更加灵活，我们可以很方便的定义属性的类型，比如我们可以定义字符串、数字类型等，如下所示：

如果你尝试进行错误类型的传递，浏览器控制台将会收到警告信息。

除了可以做基本的类型验证外，我们可以做更多的验证，比如是否必填，我们需要只需要向将属性的值改成对象熟悉进行配置即可，如下代码所示：

从上述代码你可以看出，我们在对象里增加 type、required 属性用来验证数据类型和属性是否必填，除了这几个属性，我们还可以配置 default(默认值)和 validate(自定义验证方法)。

默认值配置，如下代码所示：

如果你需要做复杂的验证，你可以编写一个自定义函数，该函数返回一个布尔值即可，如下段代码所示

从上述代码，用于确保用户的角色在规定范围之内。

通过事件方法，在父子组件之间进行数据传值

通过上面的例子，我们清楚了单一组件怎么去接收值啦，如果组件之间进行嵌套，我们如何通过父组件把值传递回去呢，熟悉 React 的同学们，我们可以通过回调函数的形式将值传递给子组件，虽然Vue也可以这么做 ，但是我推荐大家用emit事件进行传值。

首先我们来先看下，如何在子组件的模板里定义DOM监听事件，其实定义很简单，使用$emit方法即可，示例代码如下：

SearchBox.vue

在上述代码中，我们创建了一个搜索按钮组件，包含一个输入框和一个搜索按钮，当按钮被点击时，其监听事件将会被触发，在包含它的父组件里可以进行监听，并将值进行传回，接下来我们来看看父组件如何传值的，代码如下：

父组件代码

从上述代码我们可以看你出，在父组件里我们引入了 SearchBox 组件，添加search事件属性和对应的方法，当用户点击 SearchBox 组件时，子组件的监听事件将会被触发，调用我们指定的父组件定义的 onSearch 事件，并将参数 terms 传回方法。

插槽(Slots)

到目前为止，我们展示的案例中组件都是在闭合的标签中，就是最外层的标签是闭合标签。这样做的目的就是方便组件之间进行自由组合。

那什么是插槽呢？以下是我的个人的理解：

简单的说，插槽就是可以让开发者自定义地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个地方弄了几个槽(子组件中)，我们开发时，就可以在对应的槽中放置对应的代码了。更通俗的讲，通过slot插槽向组件内部指定位置传递内容。

我们可以在子组件放置 标签，在组件渲染过程中，可以按照我们指定的内容对相应位置进行内容替换，比如我们有一个TodoList.vue的子组件，示例代码如下：

TodoList.vue

父组件模板调用时

上述这个例子，我们可以在TodoList组件的

• 区域随意替换内容。

回调插入指定的内容

可以自定义自己的内容，当子组件被加载时，就好比回调函数一般，我们可以将返回的内容替换插槽的内容。

命名插槽(Named Slots)

你可以对组件的插槽进行命名，这就意味着你的模板有多个位置是你是可以自定义标记名称的，这就是所谓的语义化，大大提高了模板设计的灵活性，还是让我们来看个例子吧，比如我们要做个类似 Bootstrap 框架的卡片组件( card component )，我们需要在组件的插槽上标记header, footer, body。

HeaderFooterCard.vue (仅包含模板内容)

在父组件内进行调用

从上述的例子中，我们可以更加语义化的替换槽中指定的内容，我们不仅可以使用html内容进行替代，还能用其它Vue组件进行替换。

作用域插槽(Scoped Slots)

插槽还有一个比较有趣的功能就是作用域插槽，允许子组件访问父组件传过来的值，就好比变量的作用域。还是我们来看个例子，来理解吧，比如我们有个AjaxLoader的组件，代码如下：

AjaxLoader.vue

父组件调用

通过上述的例子，子组件通过 slot-scope 属性获取接口返回的数据，并将数据内容渲染至插槽指定的位置。

小节

今天的内容就和大家分享到这里，我们一起简单学习了组件的生命周期、如何定义组件属性、父子组件事件传值和槽的内容，今天的内容有点多，但是很重要，在下一篇文章，笔者将继续给大家分享路由相关的知识内容，敬请期待。

vue基础相关文章

「vue基础」新手快速入门篇(一)

「vue基础」Vue相关构建工具和基础插件简介

「vue基础」手把手教你编写一个简单的 Vue 组件