vue的组件化开发

在我们以前开发前端的时候，把所有的业务都放在了一起，这样做，不管是我们后期的维护还是扩展，都显得含麻烦，也不利于我们的代码重复使用。组件化开发模式也就是为了解决这种麻烦，把我们的复杂业务代码，抽离成一个个组件，当我们需要开发一个页面时，我们就可以直接引入这个组件，直接使用即可！。

1.初步使用vue的组件

注册组件的三个步骤
1.创建组件构造器：
template:代表模板，就是以后你要在页面上显示的html模板代码

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2.注册组件：
参数1：你给这个组件起的名称，在页面就可以直接把这个当作标签来时用
参数2：上边你创建的组件构造器对象

/*注册组件*/
    Vue.component('my-cpn',cpn);

3.使用组件：注意，组件必须要写在挂载在vue的标签下，否则不生效

<div id="app">
    <my-cpn></my-cpn>
</div>

这种方式，是组件化开发最原始的使用方式，在后期不会使用这种方式，而是使用更简便的语法糖方式开发

2.全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。

如何创建局部组件：

1.创建组件构造器：

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2.在vue实例中创建组件

const vue = new Vue({
        el: "#app",
        data: {},
        /*使用这个对象，创建组件，创建出来的组件只能被挂载在这个实例上的标签内使用*/
        components:{
            "my-cpn": cpn
        }
    })

3.父子组件

我们知道vue的组件化就是把一个应用的所有内容，抽历成一个个的组件，最终形成一个组件树，那么我们肯定要用到父子组件。

<script>
    /*创建一个子组件*/
    const chile = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是子组件的标题</h1>
                <a href="http://www.baidu.com">点我</a>
            </div>
        `
    })
    /*创建一个父组件*/
    const fu = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是父组件的标题</h1>
                <chile></chile>
            </div>  
        `,
        <!--父组件创建局部的子组件，就可以在父组件的标签内使用了-->
        components:{
     
     
            "chile":chile
        }
    })


    const vue = new Vue({
     
     
        el: "#app",
        data: {
     
     },
        <!--跟组件引入父组件，在引入父组件的时候，父组件就已经编译好了-->
        components: {
     
     
            "my-cpn":fu
        }
    })
</script>

注意：使用父子组件时，要在每一个模板上都要有一个根标签，否则会报错。在我们引入父组件时，父组件已经完成了解析，不存在chile的标签了，最终使用父组件时，父组件就已经把子组件的内容引入到自己的里面了。

4.创建组件语法糖

上边创建组件很麻烦，vue为我们提供了创建组件的语法糖

全局组件语法糖：
省去了extend注册组件构造器的步骤
语法：
Vue.component(标签名，{
template:html模板代码
})

局部组件的语法糖
语法：

const vue = new Vue({
       el: "#app",
       data: {},
        /*局部组件的语法糖*/
        components:{
            "标签名":{
                template:`
                    html模板代码
            }
        }
    })

我们还可以再把template抽取成一个对象，就会更简洁：

<!--<template id="mytem">
    <a>haha</a>
</template>-->
<script type="text/x-template" id="mytem">
    <a>点我</a>
</script>

以上两种方式都可以抽离模板代码，在需要使用的地方，根据id来匹配即可

全局
Vue.component("my-cpn",{
        template:"#mytem"
    })
局部
components:{
    "my-cpn":{
         template:"#mytem"
     }
}

5.组件的数据存放

组件是不可以访问我们vue实例中的数据的，组件其实也有一个可以存放数据的地方

模板中使用的数据：
<template id="mytem">
    <h1>{
   
   {message}}</h1>
</template>
可以在模板对象中，定义data：
components:{
    "mycpn":{
         template:"#mytem",
         /*data: function (){
             return {
                 message: "lala"
             }
         }*/
         data(){
             return{
                 message:'papa'
             }
         }
     }
 }