Vue 组件基础

组件是vue中堪称最为强大的功能之一，这个概念的核心目标就是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置在对应的.vue
文件中。我前面的例子其实就是组件的形式。

我们可以把组件理解为预先定义好行为的ViewModel类，一个组件可以定义很多的选项，但是最为核心的还是以下几个：

模版-template
声明了数据和最终展现给用的的dom之间的映射关系
初始数据-data
组件的初始数据，通常是私有的
接受的外部参数-props
组件之间通过参数传递来进行数据的传递和共享，参数默认是单向绑定，也就是由上至下，但也可显示的声明为双向绑定
方法-methods
对数据改变操作一般都在组件的方法内进行，可以通过v-on指令将用户的输入事件和组件方法进行绑定

5.生命周期钩子函数-lifecycle hooks
一个组件可触发多个生命周期钩子函数，比如我们前面提到过的created、destroyed等。在这些函数里面，我们可以封装一些自定义的逻辑。

接下来我们在谈一下组件的注册，组件的注册有两种，一种是全局注册，一种是局部注册。

1.全局注册
我们可以通过以下方式：

  Vue.component('my-component',  {
        template: '<div>我是全局注册的组件</div>'
    })

然后我们就可以用下面的方式使用了：

<div id="app">
    <my-component></my-component>
</div>

这里我们需要注意一点，如果要在父实例中使用我们这个组件，那么必须在实例创建之前注册。

我们还可以通过Vue.extend()创建一个组件构造器：

  var MyComponent = Vue.extend({
        template: '<div>我是全局注册的组件</div>'
    })
    Vue.component('my-component', MyComponent)

当然了，和我们前面看到过的例子一样，我们同样可以在组件的内容里面拥有我们的初始化数据，只不过在使用data的时候，data必须是函数，然后将数据return出去。


    Vue.component('my-component', {
        data() {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

渲染效果：
这里写图片描述

2.局部注册
我们可以使用components选项来进行局部注册组件，注册后的组件只有在该实例作用域下有效。

<div id="app">
    <my-component></my-component>
</div>

  var Child = {
        template: '<div>我是局部注册组件-子组件</div>'
    }

    var app = new Vue({
        el: '#app',
        components: {
            'my-component': Child
        }
    })

运行效果：
这里写图片描述

  var Child = Vue.extend({
        template: '<div>我是局部注册组件-子组件</div>'
    })

    var Parent = Vue.extend({
        template: '<div><p>我是父组件</p><child></child></div>',
        components: {
            'child': Child
        }
    })

    var app = new Vue({
        el: '#app',
        components: {
            'my-component': Parent
        }
    })

这里写图片描述

如果我们不需要每个组件都要全局注册，可以让组件只能用在其他组件内，上面的例子大家可以参考一下。这里给大家提醒一点：

template: '<div><p>我是父组件</p><child></child></div>'

template里面的html代码一定要包含一个顶级的布局元素，假如我们改成这样：

  template: '<p>我是父组件</p><child></child>',

那么程序运行结果可能就是这样的了，
这里写图片描述

关键是这点小错误很难察觉啊。。。

猜你喜欢