vue.js的学习（创建组件的三种方式以及一些问题）

前言

       学习vue也有一段时间了，前面学习了vue中的一些基础的只是，由于期末的原因忙于期末作业就暂停了vue的学习，现在放假了，有时间了就继续学习vue，今天来学习以下vue中的组件，我们都知道其实vue是组件化开发，运用好组件可以大大的提高我们开发的效率。

创建组件的三种方式

使用extend来创建组件

vue中的extend可以创建一个组件构造器，注意这个创建的不是组件，而是组件构造器，还要通过component注册之后才是组件实例，下面是演示：

var ext = Vue.extend({
            template: "<p>这是一段文字</p>"
        })
//component方法有两个参数，第一个参数就是将来我们组件在html中的标签名，就是我们要以什么标签名去将组件应用到网页中，第二个参数就是一个构造器，这个构造器中的template就是我们的组件的模板。
Vue.component('test', ext);

也可以直接这样写：

Vue.component('test', Vue.extend({
            template: "<p>这是一段文字</p>"
        }));

这样写会更加的简便一些。

省略extend

Vue.component('test', {
            template: "<p>这是一段文字</p>"
        });

vue中也可以将extend省略掉，来创建组件，这样会更加的方便一些

在html中书写模板

<div id="app">
        <test></test>
    </div>
    <!-- 在html中在template标签中书写模板，然后通过id值或者类名在component引用 -->
    <template id="tem">
        <div>
            <p>这是一段文字</p>
        </div>
    </template>

    <script src="./../../js/vue.js"></script>
    <script>
        Vue.component('test', {
            template: "#tem"
        });

通过这种方式来创建组件有一个最大的优势就是因为模板中的代码不是在字符串中书写的，而是在html中书写的，所以书写起来会比较的方便，有代码提示。

创建局部组件

前面都是创建的全局组件，这里来演示以下如何创建一个局部组件，其实现在我学过的所有的局部的东西都有一个特点就是名称都相比于全局组件会带s后缀，因为局部components这个对象中可以创建很多个的局部组件，而且因为是在一个对象中，所以创建的局部组件也是通过一个对象来定义的.

var vm = new Vue({
    el: '#app',
    data() {
        return {

        }
    },
    methods: {

    },
    <!-- 这里的components本身也是一个对象的键值对，然后它的值又是一个对象，而这个对象的键就是组件的引用名，值是一个模板对象。 -->
    components: {
        // 局部组件一
        test: {
            template: "#tem",
            data() {
                return {

                }
            },
        },
        // 局部组件二
        test2: {
            template: "#tem",
            data() {
                return {

                }
            },
        },
    }
})

要注意的是既然创建的是局部的组件这就以为着它只能在相应的全局组件内有效

要注意的事情

• 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 符号连接；如果不使用驼峰,则直接拿名称来使用即可;
  • 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

    Vue.component('test', {
                template: "<p>这是一段文字</p><p>这是另一段文字</p>"
            });

像是这样就会报错，也很好理解，如果需要多个根元素直接创建多个组件就好了。

• 我们创建的组件也可以有自己的属性以及方法，因为我们的vue本身就是组件化开发，但是要注意的一件事情是我们创建的组件的data的写法有要求，必须是函数返回值的形式，像下面这样：

  data() {
      return {
  
      }
  },

那为什么要这样呢，如果不这样的话我们给所有组件都用相同名字的data来存放属性，那么当属性的值发生改变的时候，其他的组件的也会受到影响，很显然这不是我们想要的，如果通过函数返回值的这种方式就可以避免这种情况。

总结

组件在vue中是非常重要的，因为vue就是组建化开发，那么这里就先学习如何创建组件，下一篇介绍组件之间的一些其他知识。