vue组件

一、什么是组件

拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块

二、功能模块

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

三、全局组件定义的三种方式

方式一

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>


//声明全局组件   参数1 组件名  2，组件内容
var login = Vue.extend({
    template: '<h1>登录</h1>'
});
//使用当作标签使用
Vue.component('login', login); 
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式二

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>


Vue.component("login",{template:"<h2>哈哈</h2>"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式三

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>

//将模板字符串，定义到script标签种
<script type="x-template" id="study"> 
        <h3>哈哈</h3>
</script>


Vue.component("login",{template:"#study"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式四

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>

//专属标签
<template id="study">
        <div>
            <h4>哈哈</h4>
        </div>
</template>


Vue.component("login",{template:"#study"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

★注意：

1.template标签不能渲染

2.只能有一个根元素

3.组件命不能为存在的标签名

4.多个单词定义是用驼峰，但是使用时用连接符

5.数据隔离

6.可以用components属性定义局部组件，类似于私有定义