组件系统是 vue.js 其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:
那么什么是组件呢?
组件可以扩展 html 元素,封装可重用的 HTML 代码,我们可以将组件看作自定义的 HTML 元素。
本文的 Demo 和源代码已放到 GitHub,如果您觉得本篇内容不错,请点个赞,或在 GitHub 上加个星星!
(所有示例都放在 GitHub Pages 上了,请访问查看示例汇总)
由于组件的篇幅较大,我将会把组件的入门知识分为两篇来讲解,这样也便于各位看官们快速消化。
vue.js 的组件的使用有 3 个步骤:创建组件构造器、注册组件和使用组件。
下面的代码演示了这 3 个步骤:
运行结果如下:
可以看到,使用组件和使用普通的 HTML 元素没什么区别。
我们用以下几个步骤来理解组件的创建和注册:
请注意第 4 点,以下代码在 3 个地方使用了 <my-component> 标签,但只有 #app1 和#app2 下的 <my-component> 标签才起到作用。
- <html>
- <body>
- <div id="app1">
- <my-component>
- </my-component>
- </div>
- <div id="app2">
- <my-component>
- </my-component>
- </div>
- <my-component>
- </my-component>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- var myComponent = Vue.extend({
- template: 'This is a component ! '
- })
- Vue.component('my - component', myComponent)
- var app1 = new Vue({
- el: '#app1'
- });
- var app2 = new Vue({
- el: '#app2'
- })
- </script>
- </html>
调用
注册组件时,组件的注册是全局的,这意味着该组件可以在任意 Vue 示例下使用。
- Vue.component()
上面的示例可以改为局部注册的方式:
- <html>
- <body>
- <div id="app">
- <my-component>
- </my-component>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- // 1.创建一个组件构造器
- var myComponent = Vue.extend({
- template: 'This is my first component ! '
- })
- new Vue({
- el: '#app',
- components: {
- // 2. 将myComponent组件注册到Vue实例下
- 'my - component': myComponent
- }
- });
- </script>
- </html>
由于 my-component 组件是注册在 #app 元素对应的 Vue 实例下的,所以它不能在其它 Vue 实例下使用。
- <div id="app2">
- <my-component></my-component>
- </div>
- <script>
- new Vue({
- el: '#app2'
- });
- </script>
如果你这样做了,浏览器会提示一个错误:
我们可以在组件中定义并使用其他组件,这就构成了父子组件的关系。
这段代码的运行结果如下:
我们分几个步骤来理解这段代码:
定义一了个 Child 组件构造器
- var Child = Vue.extend(...)
定义一个 Parent 组件构造器
- var Parent = Vue.extend(...)
全局注册 Parent 组件
- Vue.component('parent-component', Parent)
Child 组件是在 Parent 组件中注册的,它只能在 Parent 组件中使用,确切地说:子组件只能在父组件的 template 中使用。
请注意下面两种子组件的使用方式是错误的:
- <div id="app">
- <parent-component>
- <child-component></child-component>
- </parent-component>
- </div>
- <div id="app">
- <parent-component>
- </parent-component>
- <child-component>
- </child-component>
- </div>
运行这段代码,浏览器会提示以下错误
以上组件注册的方式有些繁琐,Vue.js 为了简化这个过程,提供了注册语法糖。
使用 Vue.component() 直接创建和注册组件:
在选项对象的 components 属性中实现局部注册:
尽管语法糖简化了组件注册,但在 template 选项中拼接 HTML 元素比较麻烦,这也导致了 HTML 和 JavaScript 的高耦合性。
庆幸的是,Vue.js 提供了两种方式将定义在 JavaScript 中的 HTML 模板分离出来。
- <html>
- <body>
- <div id="app">
- <my-component>
- </my-component>
- </div>
- <script type="text/x-template" id="myComponent">
- This is a component ! </div>
- /
- </script>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('my - component', {
- template: '#myComponent'
- })
- new Vue({
- el: '#app'
- })
- </script>
- </html>
template 选项现在不再是 HTML 元素,而是一个 id,Vue.js 根据这个 id 查找对应的元素,然后将这个元素内的 HTML 作为模板进行编译。
注意:使用
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="app">
- <my-component>
- </my-component>
- </div>
- <template id="myComponent">
- <div>
- This is a component!
- </div>
- </template>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('my - component', {
- template: '#myComponent'
- })
- new Vue({
- el: '#app'
- })
- </script>
- </html>
在理解了组件的创建和注册过程后,我建议使用
这使得 HTML 代码和 JavaScript 代码是分离的,便于阅读和维护。
另外,在 Vue.js 中,可创建. vue 后缀的文件,在. vue 文件中定义组件,这个内容我会在后面的文章介绍。
传入 Vue 构造器的多数选项也可以用在
或
- Vue.extend()
中,不过有两个特例:
- Vue.component()
和
- data
。Vue.js 规定:在定义组件的选项时,data 和 el 选项必须使用函数。
- el
下面的代码在执行时,浏览器会提出一个错误
- Vue.component('my-component', {
- data: {
- a: 1
- }
- })
另外,如果 data 选项指向某个对象,这意味着所有的组件实例共用一个 data。
我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象:
- Vue.component('my - component', {
- data: function() {
- return {
- a: 1
- }
- }
- })
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
下面的代码定义了一个子组件 my-component,在 Vue 实例中定义了 data 选项。
- var vm = new Vue({
- el: '#app',
- data: {
- name: 'keepfool',
- age: 28
- },
- components: {
- 'my-component': {
- template: '#myComponent',
- props: ['myName', 'myAge']
- }
- }
- })
为了便于理解,你可以将这个 Vue 实例看作 my-component 的父组件。
如果我们想使父组件的数据,则必须先在子组件中定义 props 属性,也就是
这行代码。
- props: ['myName', 'myAge']
定义子组件的 HTML 模板:
- <template id="myComponent">
- <table>
- <tr>
- <th colspan="2">
- 子组件数据
- </th>
- </tr>
- <tr>
- <td>
- my name
- </td>
- <td>
- {{ myName }}
- </td>
- </tr>
- <tr>
- <td>
- my age
- </td>
- <td>
- {{ myAge }}
- </td>
- </tr>
- </table>
- </template>
将父组件数据通过已定义好的 props 属性传递给子组件:
- "app">
- <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
- </div>
注意:在子组件中定义 prop 时,使用了 camelCase 命名法。由于 HTML 特性不区分大小写,camelCase 的 prop 用于特性时,需要转为 kebab-case(短横线隔开)。例如,在 prop 中定义的 myName,在用作特性时需要转换为 my-name。
这段程序的运行结果如下:
父组件是如何将数据传给子组件的呢?相信看了下面这图,也许你就能很好地理解了。
在父组件中使用子组件时,通过以下语法将数据传递给子组件:
- <child-component v-bind:子组件prop="父组件数据属性">
- </child-component>
既然父组件将数据传递给了子组件,那么如果子组件修改了数据,对父组件是否会有所影响呢?
我们将子组件模板和页面 HTML 稍作更改:
- <div id="app">
- <table>
- <tr>
- <th colspan="3">
- 父组件数据
- </td>
- </tr>
- <tr>
- <td>
- name
- </td>
- <td>
- {{ name }}
- </td>
- <td>
- <input type="text" v-model="name" />
- </td>
- </tr>
- <tr>
- <td>
- age
- </td>
- <td>
- {{ age }}
- </td>
- <td>
- <input type="text" v-model="age" />
- </td>
- </tr>
- </table>
- <my-component v-bind:my-name="name" v-bind:my-age="age">
- </my-component>
- </div>
- <template id="myComponent">
- <table>
- <tr>
- <th colspan="3">
- 子组件数据
- </td>
- </tr>
- <tr>
- <td>
- my name
- </td>
- <td>
- {{ myName }}
- </td>
- <td>
- <input type="text" v-model="myName" />
- </td>
- </tr>
- <tr>
- <td>
- my age
- </td>
- <td>
- {{ myAge }}
- </td>
- <td>
- <input type="text" v-model="myAge" />
- </td>
- </tr>
- </table>
- </template>
运行这个页面,我们做两个小试验:
1. 在页面上修改子组件的数据
修改了子组件的数据,没有影响父组件的数据。
2. 在页面上修改父组件的数据
修改了父组件的数据,同时影响了子组件。
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态可以使用
显式地指定双向绑定,这使得子组件的数据修改会回传给父组件。
- .sync
- <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
可以使用
显式地指定单次绑定,单次绑定在建立之后不会同步之后的变化,这意味着即使父组件修改了数据,也不会传导给子组件。
- .once
- <my-component v-bind:my-name.once="name" v-bind:my-age.once="age">
- </my-component>
为了尽快消化这些知识,我们来做一个小示例吧。
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="styles/demo.CSS" />
- </head>
- <body>
- <div id="app">
- <div id="searchBar">
- Search
- <input type="text" v-model="searchQuery" />
- </div>
- <simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
- </simple-grid>
- </div>
- <template id="grid-template">
- <table>
- <thead>
- <tr>
- <th v-for="col in columns">
- {{ col | capitalize}}
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="entry in data | filterBy filterKey">
- <td v-for="col in columns">
- {{entry[col]}}
- </td>
- </tr>
- </tbody>
- </table>
- </template>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('simple - grid', {
- template: '#grid - template',
- props: {
- data: Array,
- columns: Array,
- filterKey: String
- }
- }) var demo = new Vue({
- el: '#app',
- data: {
- searchQuery: '',
- gridColumns: ['name', 'age', 'sex'],
- gridData: [{
- name: 'Jack',
- age: 30,
- sex: 'Male'
- },
- {
- name: 'Bill',
- age: 26,
- sex: 'Male'
- },
- {
- name: 'Tracy',
- age: 22,
- sex: 'Female'
- },
- {
- name: 'Chris',
- age: 36,
- sex: 'Male'
- }]
- }
- })
- </script>
- </html>
除了以上介绍的知识点,这个示例还用到了两个知识点:
1. prop 验证
- props: {
- data: Array,
- columns: Array,
- filterKey: String
- }
这段代码表示:父组件传递过来的 data 和 columns 必须是 Array 类型,filterKey 必须是字符串类型。
更多 prop 验证的介绍,请参考:
2. filterBy 过滤器
可以根据指定的字符串过滤数据。
使用组件的前提是创建并注册组件,本篇文章详细介绍了组件从创建到使用的步骤,并介绍了几种不同的方式去创建和注册组件;然后介绍了组件的 props 选项,它用于将父组件的数据传递给子组件,最后我们用一个小的示例演示了这些知识点。
来源: