Vue.js note6（组件component的使用&全局组件&局部组件）

1、什么是组件

我们知道，vue的核心是数据驱动与组件化，所以组件是非常重要的。那么组件是什么呢？

组件的概念：组件即自定义控件，是Vue.js最强大的功能之一
组件的用途：组件能够封装可重用ui代码，扩展HTML标签功能
组件的本质：自定义标签
组件的分类：全局组件、局部组件

全局组件的作用域：不同作用域内均可使用
局部组件作用域：只在定义该组件的作用域内可以使用

组件的类型：

1. 页面级别的组件 ： 页面级别的组件，通常是views目录下的.vue组件，是组成整个项目的一个大的页面。一般不会有对外的接口。
2. 业务上可复用的基础组件 ： 在业务中被各个页面复用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用。
3. 与业务无关的独立组件 ： 与业务功能无关的独立组件。这类组件通常是作为基础组件，在各个业务组件或者页面组件中被使用。目前市面上比较流行的ElementUI和iview等中包含的组件都是独立组件。如果是自己定义的独立组件，比如富文本编辑器等，通常写在utils目录中。

2、组件的命名规则

不管是全局组件或者局部组件，在命名时，都要遵循一个规则：

• （1）组件名一般是全小写，比如组件命名com，调用时<com></com>。
• （2）组件名有大写字符，比如驼峰式命名法，那么在调用的时候用-来代替大写字母。
   比如，组件名：myText；调用：<my-text></my-text>。因为W3C要求的是，HTML标签必须闭合，且标签都小写。
• （3）组件名有连字符，比如命名为my-text，调用的写法同上。
• （4）组件名有下划线，比如组件命名com_text，调用时<com_text></com_text>。

建议组件名全部小写，因为可以一定程度上避免和当前或未来HTML元素相冲突。

我还弱弱的发现了一个小问题，就是组件调用的时候，不写闭合标签也OK。但是不符合W3C规范，最好不要那样写。

3、组件里template的设置方式

目前我遇到的有两种方式：
（1）把标签直接以字符串的形式写入template后面，如 template：'<div></div>'
（2）引用template标签里的内容，如template：'#tem'（template标签的id=“tem”）

这有篇文章解释了template在vue中的运行原理：关于template标签用法总结(含vue中的用法总结)

4、组件里数据、函数的定义语法

数据的定义： 需以函数返回值的形式定义数据。

data：function(){          
	return {a:1,b:2}		
}	

现在学了组件了，没啥太大问题的话，以后程序需要的模型数据应该都会放在组件里面了。而且，组件里面的变量只能组件用，出了该组件自定义标签的作用域，就用不了了；其他组件的变量甚至是父实例的变量，如果不使用一定的手段，也无法使用。

函数的定义： 函数名一般不加双引号比如com(){}，但也可以"com":function(){}，甚至"com"(){} 。

methods:{
   函数名：function(){}
}

5、组件的调用

组件本质为标签，调用方式与调用标签相同。
调用方法为：<组件名></组件名>

6、全局组件 component

语法：

Vue.component(‘name’, {
     	   template: ‘<div></div>’
});

全剧组件定义的位置： 创建实例前。
全局组件的作用域： 全局范围内均可调用。

小栗子1：写一个简单的全局组件。

<div id="demoSky">
    <!-- 使用组件，ui代码重复使用，我调用几次，就执行几次 -->
    <com></com>
    <com></com>
</div>
<script>
    Vue.component("com",{
        template:"<div>我是全局组件</div>"
    })
    new Vue({
        el:"#demoSky",
    })
</script>

如果组件中有多个标签呢？ 那必须有一个父容器进行包裹。

<div id="demoSky">
    <com-two></com-two>
</div>
<script>
    Vue.component("comTwo",{
        template:"<div><div>标签1</div><div>标签2</div></div>"//总之最外层就一个标签
    })    
    new Vue({
        el:"#demoSky",
    })
</script>

在template中写html标签，这样写很麻烦对不对，都没有代码提示啥的，那还有其他办法吗？还真有，vue提供了外部模板引入的方式，这涉及到了HTML的template标签。

那template标签是啥，没接触过vue前我都不记得。官方是这么来解释HTML的template标签的：

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。

将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

按我的理解来说，template标签就是一个模板，把HTML页面中的重复结构拿出来，供其他部分使用。

<div id="demoSky">
    <com-three></com-three>
</div>

<!-- 外部模板 -->
<template id="moduleThree">
    <div>
        <p>我是外部模板内容  1</p>
        <p>我是外部模板内容  2</p>
        <p>我是外部模板内容  3</p>
    </div>
</template>

<script>
    Vue.component("comThree",{
        template:"#moduleThree" // 引入外部模板
    })
    new Vue({
        el:"#demoSky",
    })
</script>

7、局部组件 components

语法：

定义位置： 实例配置项components中定义。
局部组件的作用域： 定义在vue实例中，只能在当前实例范围内生效。

写个局部组件小栗子：注意，即便组件定义在vue实例中，正常情况下，组件的变量等内容与实例不互通。

<div id="demoSky">
  <com></com>
</div>

<template id="tem">
    <div>
        <p>我是局部组件，不使用变量</p>
        <p>{{text}}</p>
        <p>{{fushili}}</p>
    </div>
</template>

<script>  
    new Vue({
        el:"#demoSky",
		data:{
		    fushili:"我是实例中的变量",
		},
        methods:{},
        // 定义局部组件
        components:{
            // 组件的名字
            com:{
                template:"#tem",
                data(){
                    return{
                        text:"我是局部组件的变量text"
                    }
                }
            }
        }
    })
</script>

结果打印出来如下，是不是没有显示实例的变量------别说，还真没显示。

提个问题： 如果vue实例的变量与组件的变量名字一样了的话，不会冲突对吧？ 对。

<div id="demoSky">
    {{same}}
    <com></com>
</div>

<template id="tem">
    <div>
        <p>{{same}}</p>
    </div>
</template>

<script>
    new Vue({
        el: "#demoSky",
        data: {
            same: "实例中的same变量"
        },
        components: {
            com: {
                template: "#tem",
                data() {
                    return {
                        same: "组件中的same变量"
                    }
                }
            }
        }
    })
</script>

总结：

学完了局部组件之后 。。。
实例中：el 、data、methods、watch、computed、fliters、components、8个钩子方法
全局：filter、component、