vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统。
一、Vue.js组件系统
每一个新技术的诞生,都是为了解决特定的问题。
组件的出现就是为了解决页面布局等等一些列的问题。
vue中的组件分为两种,全局组件和局部组件。
二、全局组件与局部组件
2.1全局组件
通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue
创建的 Vue 根实例中,把这个组件作为自定义元素来使用。
方式一:
Title
方式二:
Title
2.2局部组件
Title
三、组件的参数
因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
3.1data
data必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
Title
3.2在局部组件中使用自组件
Title
3.3父子组件的通信
Title
3.4子父组件的通信
父组件在mounted的时候,监听一个自定义事件。
给子组件绑定一个click事件之后,通过内建的方法$emit在父组件上触发一个事件,这个时间就是父组件监听的自定义事件。
Title
3.5混入
混入可以提高代码的重用性。
Title
3.6插槽
有时候我们需要向组件传递一些数据,这时候可以使用插槽
Title 登录 注册 最热 段子 42区 图片
3.7具名插槽
操作使用了组件的复用,如果我们在同一个组件内写入不同的页面呢?此时,我们需要多个插槽,并且给不同的内容命名。
Title 这是标题栏
这是内容
这是页脚
我们还是可以保留一个未命名插槽,这个插槽是默认插槽,也就是说它会作为所有未匹配到插槽的内容的统一出口。
3.8非关系组件之间的通信
非父子组件之间可以通过一个中间Vue实例来进行通信。
Title
3.9在组件上使用v-model
自定义事件也可以用于创建支持 v-model
的自定义输入组件。记住:
等价于:
当用在组件上时,v-model
则会这样:
为了让它正常工作,这个组件内的 <input>
必须:
将其 value 特性绑定到一个名叫 value 的 prop 上在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出
写成代码之后是这样的:
Vue.component('custom-input', { props: ['value'], template: ` `})
现在 v-model
就应该可以在这个组件上完美地工作起来了:
如下是在组件中使用v-model示例:
Title
3.10使用组件的注意事项
注意事项一:单个根元素
当构建一个内容页面的组件时,我们的组件可能包含多个HTML标签。
Hello World
Hello Vue
然而如果你在模板中尝试这样写,Vue 会显示一个错误,并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内,来修复这个问题,例如:
Hello World
Hello Vue
注意事项二:解析特殊HTML元素
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
这个自定义组件 <blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is
特性给了我们一个变通的办法:
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
字符串 (例如:template: '...')单文件组件 (.vue)