vue.js框架快速入门简明教程(六)：组件

假如我们写了一段html代码，如果想要在其他地方调用这这块代码块，我们只能复制多一段，这样无疑是最笨的方法，使得程序变得缓慢不说，如果我想统一修改代码块上的某个元素，就得全部修改一次，真的是蠢到家了有木有。幸好有了Vue.js，把前端程序员从愚蠢繁杂的工作中拯救了出来。

Vue.js为什么那么伟大？这篇文章将带大家去探讨一下Vue.js的强大之处。

一、什么是Vue组件？

Vue.js组件是Vue.js 最强大的功能之一。Vue.js组件可以扩展HTML元素，什么意思呢？就是为html新增标签，就像html5那样加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。而Vue.js组件扩展HTML的元素是你为该项目注册的。此外Vue.js可以封装可重用的代码，在需要的之后只需要直接引入就可以。来看看注册Vue.js组件。

二、Vue.js组件中的全局组件和局部组件

就像javascript定义变量，Vue.js组件注册也有区分全局和局部组件。

1、全局组件

全部组件就是可以在任意Vue.js示例下使用的，在Vue.js中调用Vue.js.component()注册的组件是全局的。

注册一个全局组件语法格式如下：

Vue.js.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

例如：把id=template1中的模版插入到已经注册的goodnight组件中。

<div id="app">
    <goodnight></goodnight>
    <goodnight></goodnight>
    <goodnight></goodnight>
</div>

<template id="template1">
    <div>
        <h3>goodnight</h3>
        <button id="btn">Submit</button>
    </div>
</template>

</body>
<script>
    // 注册
    Vue.component('goodnight', {
        template: '#template1'
    })
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>

2、局部组件

如果在实际项目中不需要全局注册，或者是想让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。

例如：模版只能在goodnight里面用，在good组件是用不了的。

<div id="app">
    <goodnight></goodnight>
    <goodnight></goodnight>
    <good></good>
</div>

<template id="template1">
    <div>
        <h3>goodnight</h3>
        <button id="btn">Submit</button>
    </div>
</template>

</body>
<script>

    var template1 = {
        template: '#template1'
    }
    // 注册
    // 创建根实例
    new Vue({
        el: '#app',
        components:{
        'goodnight': template1,
        }
    })
</script>

另外，Vue.extend 是构造一个组件的构造器。充分说明了Vue.js的组件使用规则和原理，设置模板，向模板填充数据并渲染。

用于Vue.js组件的局部注册。简单的理解为Vue.extend创建的组件会自动添加到自定义的元素上。

用法：Vue.extend ( options )，options 是对象；

例如：
<div id="extend1"></div>

var extend1=Vue.extend({
    template:'<h1>{{myname}}</h1>',
    data(){
        return {
            myname:'vue.js局部组件使用'
        }
    }

})

var extend2=new extend1();
extend2.$mount('#extend1')

三、自定义属性prop

组件实例之间的作用于是独立的，相互之间不能进行数据的传递，那如果一个子组件需要应用父组件的数据，应该如何来进行数据传递呢？在Vue.js中，可以通过设置父组件的属性prop，自定义地把数据传递给子组件。

例如：

<div id="app">
    <my-component message="hello" name="vue.js" age="18"></my-component>
</div>

</body>
<script>

    Vue component('my-component', {
        // 声明 props
        props: ['message','name','age'],
        
        data:function(){
          return {
              message1:this.message,
              name1:this.name,
              age1:this.age
          }
        },
        template: '<span>大家好，我是{{ name1}},今年{{age1}}</span>'
    })
    
    // 注册
    // 创建根实例
    new Vue({
        el: '#app',

    })
</script>

其实props是收取父组件的数据，并且可以通过实例创建子组件的方式传递给子组件并渲染模版。prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态而发生数据错误。

四、自定义事件

那在实际项目中，是需要把子组件要把数据传递回去给父组件，那怎么办？不是说props是单向绑定的吗？这时候，就不用prop 了，子组件要把数据传递给父级 依靠自定义事件。 $on(eventName) 监听事件

和 $emit(eventName) 触发事件 例如：

<div id="app">
    <button @click="add">{{night}}</button>
</div>

</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            night:"晚上好"
        },
        methods:{
            add:function(){
                this.$emit('text','我睡了');
            }

        }
    });
    app.$on('text',function(value){
        console.log(value);
    })

</script>

以上是Vue.js强大的组件教程，结合实例大家更加容易理解和快速上手使用，会灵活的使用组件在实际项目开发中显得尤为重要，帮前端开发者们剩下了不少功夫，高效率的工作。如果本文章中什么不懂的或者存在的问题，欢迎留言指正，大家共同进步。