Vue.js（3）----组件（上）

2017-07-17 本文已影响130人 _地中海大叔

Vue.js最强大的功能之一绝对是组件了，组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。当它是自定义的元素时，Vue.js的编译器可以为它添加一些特殊的功能。但是在某些情况下，是可以使用原生的HTML元素的方式。先不总结，我们现在继续向下看慢慢了解。

使用组件的基本步骤

创建：调用Vue.extend()方法创建组件构造器
注册：调用Vue.component()方法注册组件
使用组件：在Vue实例范围内使用组件

现在我们按照以上的步骤来创建一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <!-- #view是Vue实例挂载的元素，只能在挂载元素内使用组件 -->
    <div id="view">
    <my-component></my-component>
    </div>
</body>
<script src='Vue.js/js/vue.min.js'></script>
<script type="text/javascript">
    //1.创建一个组件构造器
    var myComponent =Vue.extend({
        template:'<div>this is my first component</div>'
    })

    //2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
    Vue.component('my-component',myComponent)

    new Vue({
        el:'#view'
    });
</script>
</html>

以上html页面显示为： this is my first component
那么代码中出现的一些方法的作用是什么呢？

Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。

Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
使用Vue.component()注册组件时，需要提供两个参数，第一个参数是组件的标签，第二个参数是组件构造器。
组件应该挂载在某个Vue实例下，不然不会起作用。

全局注册和局部注册

调用Vue.component()注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用。如果不需要全局注册，或者想让组件在其它的组件内也可以使用，那么可以注册局部变量。
第一个实例如果改成局部变量，那么就可以添加选项对象的component属性。

new Vue({
        el:'#view',
        component:{
            'my-component':myComponent
        }
    });

父组件和子组件

当我们在一个组件中注册和使用另一个组件时，那么这两个组件就是父子组件的关系。第一个实例也可以相应修改成如下代码：

<!DOCTYPE html>
<html>
    <body>
        <div id="view">
            <parent-component></parent-component>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>

        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })

        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template :'<div><p>This is a Parent component</p><child-component></child-component></div>',
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })

        // 全局注册Parent组件
        Vue.component('parent-component', Parent)

        new Vue({
            el: '#view'
        })
    </script>
</html>

添加了子组件的代码将会在页面中显示两行文字“This is a Parent componen"以及“This is a child component!”。那么在这次的实例中又是如何使用子组件的呢？

var Child = Vue.extend()定义了一个名为Child的组件构造器

var Parent = Vue.extend()定义了一个名为Parent的组件构造器
component:{'child-component':child}，将Child注册到Parent组件，并将组件的标签设置为child-component。
template :'<div><p>This is a Parent component</p><child-component></child-component></div>'在Parent组件内使用Child组件。
Vue.component('parent-component',Parent)全局注册Parent组件。
在页面中使用<parent-component></parent-component>渲染Parent组件的内容，同时Child组件的内容也被渲染出来

注意！子组件只能在父组件中被使用。

组件注册语法糖

以上的注册方式比较繁琐，所以提供了相对比较简便的“语法糖”简化了注册的过程，比如第一个实例可以直接将script中的代码改成如下：

Vue.component('my-component',{
        template:'<div>this is the first component!</div>'
    })
    new Vue({
        el:'#view'
    })

使用script和template标签

通过上面的例子，不难想到，当我们想要添加较多的html元素的时候，拼接各种html会很麻烦，同时也造成了HTML和JavaScript的高耦合性。因此，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用 <script>标签
首先在页面中添加<script>标签，然后给标签一个ID，比如“myComponent”，将想要添加的HTML元素添加在标签内。这时得而template标签选项就不再是HTML元素，而是一个ID，Vue.js根据这个ID查找元素，然后将这个元素内的HTML作为模板进行翻译。具体代码如下：

<div id="view">
        <my-component></my-component>
    </div>
    <script type="text/x-template" id='myComponent'>
        <div>
            this is a component!
        </div>
    </script>

<script type="text/javascript">
    Vue.component('my-component',{
        template:'#myComponent'
    })
    new Vue({
        el:'#view'
    })
</script>

注意！使用<script>标签时，type应该制定为text/x-template，这样浏览器在解析HTML文档时就会知道这不是一段JavaScript脚本了。

使用<template>标签
直接使用<template>标签更为方便，不用指定type属性，直接把上面所用到的<script>标签替换成<template>即可。

<template id='myComponent'>
        <div>
            this is a component!
        </div>
    </template>

使用props

组件实例的作用域是孤立的，也就是说一个子组件是不能在作用域中使用父组件的数据的。所以要使用props获取数据。
下面的代码定义了一个子组件my-component，在Vue实例中定义了data选项,为了便于理解，你可以将这个Vue实例看作my-component的父组件。
如果我们想使父组件的数据，则必须先在子组件中定义props属性，也就是props: ['myName', 'myAge']这行代码。

实例

<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
    <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>
</body>
<script src='Vue.js/js/vue.min.js'></script>
<script type="text/javascript">
    new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})
</script>

注意！在子组件中定义prop时，使用了camelCase命名法。但由于html特性不区分大小写，camelCase的prop用于特性时，需要转化为kebab-case（用短横线隔开），例如，在prop中定义的myName，在用作特性时需要转换为my-name。

prop的绑定类型

既然父组件把数据传给了子组件，那么当修改子组件的数据时，父组件是否会相应的产生影响呢？我们尝试一下修改一下上面的实例。

<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>

运行这个修改后的页面，可以看到当我们修改父组件的数据时，子组件也会随之更改，而当我们修改子组件的数据时，父组件不会随之更改。

vue之前的版本还有.sync指定双向绑定，.once指定单次绑定，在vue2.0已经被弃用，这里就不多说了。

好啦，关于Vue.js组件基础知识（上）就先写到这里，下面的文章将会做一个实例巩固一下哦！如果您看到了这里，请点击一个喜欢！您的每一个赞对我都是莫大的鼓励！感谢！下个文章见！