Vue组件-1 | 易学教程

　　组件是Vue.js最推崇的，也是最强大的功能之一，核心目标是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置到对应的.vue文件中。

　　Vue.js的组件可以理解为预先定义好行为的VuewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：

模板（template）—— 模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据（data）—— 一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。
接受的外部参数（props）—— 组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式声明为双向绑定。
方法（methods）—— 对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数（lifecycle hooks） —— 一个组件会触发多个生命周期钩子函数，比如created、attached、destroyed等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为Controller的逻辑被分散到了这些钩子函数中。

一、基础

　　1.注册

　　全局注册

Vue.component('didi-component,DIDIComponent')

　　如上所示，第一个参数是注册组件的名称（即在HTML中我们可以这样使用组件：<div-component></div-component>）；第二个参数是组件的构造函数，它可以是Function，也可以是Object。

Function——DIDIComponent可以是用Vue.extend()创建的一个组件构造器。代码示例如下：
```
vue.MyComponent = Vue.extend({
   //选项.... 
})
```

Object——DIDIComponent传入选项对象，Vue.js在背后自动调用Vue.extend()。代码示例如下：

//在一个步骤中扩展与注册
Vue.component('didi-component',{
   template:'<div>A custom component!</div>' 
})

组件在注册之后，便可以在父实例的模板中以自定义元素<didi-component>的形式使用。要确保在初始化根实例之前注册了组件，代码示例如下：

<body>
    <div id="example">
        <didi-component></didi-component>
    </div>
</body>
<script>
    var DIDIComponent = Vue.extend({
        template:'<div>A custom component</div>'
    })
    //注册
    Vue.component('didi-component',DIDIComponent)
    //创建根实例
    new Vue({
        el:'#example'
    })
</script>

效果如下：

```
<body>
    <div id="example">
       <div>A Custom component</div> 
    </div>
    <script>....</script>
</body>
```
注：组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项replace决定是否替换自定义元素。

　　局部注册

　　不需要每个组件都全局注册，可以让组件只能在其组件内。我们可以用实例选项components注册，代码示例如下：

<body>
    <div id="example">
        <didi-component></didi-component>
    </div>
</body>
<script>
    var Child = Vue.extend({
        template:'<div>I am child!</div>',
        replace:true
    })
    var Parent = Vue.extend({
        template:'<p>I am parent!<br/><child></child></p>',
        components:{
            //<didi-component>只能用在父组件模板内
            'child':Child
        }
    })
    //创建根实例
    new Vue({
        el:'example',
        components:{
            'didi-component':Parent
        }
    })
</script>

　　效果如下：

I am parent
I am child!

　　为了让事件更简单，我们可以直接传入选项对象而不是构造器给Vue.component()和components选项。代码示例如下：

//在一个步骤中扩展与注册
    Vue.component('didi-component',{
        template:'<div>A custom component!</div>'
    })

    //局部注册也可以这么做
    var Parent = Vue.extend({
        components:{
            'didi-component':{
                template:'<div>A custom component!</div>'
            }
        }
    })

来源：https://www.cnblogs.com/yc-1314/p/10332850.html

标签

vue

didi