初识Vue的组件

Vue两大特点：数据驱动页面和组件化开发

可以说明组件这部分的知识非常重要，有了组件我们不用在html标签中书写代码，可以更好的区分业务。

我们最新接触到的vm就是一个组件，这里我们在vm内再创建组件，说明组件是可以嵌套的，一个组件内部的功能也是完整的，也有data、filters、methods、生命周期函数等等。其中data的数据源的写法发生了一点改变，data:function(){return{}},数据写在返回的对象中。

组件声明在vm中components中，写法：

components:{
		Box:{
			template:`<div>
			<h1>6666</h1>
			<p>hello</p>
			</div>`,
        data(){
            return {
                    
                }
        },
        filters:{
                    
                }
	},

其中Box为组件名， 组件名可以用驼峰命名 使用时可以用连字符，如注册时为SmallBox，使用的时候就要变成<small-box></small-box>，当然你仍然使用<SmallBox>也可以，但是官方不建议这样，因为组件不区分大小写，当存在smallbox组件时可能会造成出错。

使用直接将我们我的组件名像标签一样用尖括号括起来放在vm对象绑定的那个节点元素中，可以是单标签也可以是双标签，如

<div id="box">
    <Box></Box>
    <Box/>
</div>

 完整代码：

 <div id="box">
        <Box></Box>
        <Box/>
    </div>
    <script>
        new Vue({
            el: "#box",
            components: {
                Box: {
                    template: `
                    <div>
			        <h1>6666</h1>
			        <p>hello</p>
			        </div>`
                }
            }
        })
    </script>

页面：

可见将内容写在组件中，然后放在html标签实现的效果与直接写在html中是一样的。

注意：注册的组件不要跟系统标签同名

模板字符串template放在vm对象外，在里面通过变量获取注册也是可以的，如：

 <div id="box">
        <Box></Box>
    </div>
    <script>
        let BOX={
                    template: `
                    <div>
			        <h1>6666</h1>
			        <p>hello</p>
			        </div>`
                }
        new Vue({
            el: "#box",
            components: {
                //注册
                Box: BOX
            }
        })
    </script>

这里介绍两种使用组件的方法，一种是上面这种，另一种是通过外部导入JS文件注册组件。

三大步：导入、注册、使用

外部JS文件：

let zj={
    template:`<div>
            <h1>111</h1>
            <h2>222</h2>
            <h3>333</h3>
    </div>`
}
export default zj;

html文件：

<div id="box">
        <!-- 使用 -->
        <Box></Box>
    </div>
    <script type="module">
        //导入
        import zj from "./组件2.js"
        new Vue({
            el: "#box",
            components: {
                //注册
                Box: zj
            }
        })
    </script>

页面：

局部组件和全局组件

上述方式注册的局部组件，只能在它所注册的那个vm对象所关联的节点元素内使用，一个vm实例可以有多个局部组件,但是都只能供当前vm实例所关联的节点元素内使用。

有局部当然就有全局，全局组件可供当前作用域的所有vm对象使用。

注意：全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)。

全局注册方法：Vue.components("组件名"，{template:模板字符串})

除了全局注册组件外，还可以全局注册过滤器和自定义指令(前面已经讲过)

全局注册过滤器：Vue.filter("方法名"，function(){//处理程序})