Vue 组件基础

小鱼儿 2022-05-17 10:13 249阅读 0赞

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

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

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

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

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

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

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

渲染效果：  
![这里写图片描述][70]

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

var Child = {
            template: '<div>我是局部注册组件-子组件</div>'
        }
    
        var app = new Vue({
            el: '#app',
            components: {
                'my-component': Child
            }
        })

运行效果：  
![这里写图片描述][70 1]

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

![这里写图片描述][70 2]

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

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

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

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

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

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

[70]: /images/20220517/f6df2427cdad4ba9b2ddd61bf0c74653.png
[70 1]: /images/20220517/09c7f0fb40a84a3193a47106dfaa4368.png
[70 2]: /images/20220517/f3b26c7e88d64aeebf8cf136271f0a1c.png
[70 3]: /images/20220517/22e42b3dc60542b9a70384ff6465f886.png