Vue2.X 自定义组件

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

Vue两大核心:

• 数据驱动界面改变
• 组件化

什么是组件?
在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件
什么是组件化?
将大界面拆分成小界面就是组件化

组件化的好处
1、可以简化Vue实例的代码
2、可以提高复用性

自定义全局组件

Vue中如何创建组件?

1、创建组件构造器
2、注册已经创建好的组件
3、使用注册好的组件

html代码：

<div id="app">
    <!-- 3.使用注册好的组件-->
    <abc></abc>
</div>

vue代码：

// 1.创建组件构造器
let Profile = Vue.extend({
   
    // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
    template: `
       <div>
            <img src="images/fm.jpg"/>
            <p>我是描述信息</p>
        </div>
    `
});
// 2.注册已经创建好的组件
// 第一个参数: 指定注册的组件的名称
// 第二个参数: 传入已经创建好的组件构造器
Vue.component("abc", Profile );

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

创建组件的其它方式 - 组件模板

1、在注册组件的时候, 除了传入一个组件构造器以外, 还可以直接传入一个对象
2、在编写组件模板的时候, 除了可以在字符串模板中编写以外, 还可以像过去的art-templatee一样在scripte中编写
3、在编写组件模板的时候, 除了可以在scripte中编写以外, vue还专门提供了一个编写模板的标签templatee

html代码：

<div id="app">
    <abc></abc>
</div>

script中编写模板组件代码：

<script id="info" type="text/html">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</script>

template 中编写模板组件代码：

<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>

vue代码：

Vue.component("abc", {
   
	// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
    template: "#info"
});

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

自定义局部组件

自定义全局组件特点
在任何一个Vue实例控制的区域中都可以使用

自定义局部组件特点
只能在自定义的那个Vue实例控制的区域中可以使用

如何自定义一个局部组件
在vue实例中新增components: {}
在{}中通过key:value形式注册组件

components:{
   abc: {}
}

html代码：

<div id="app1">
    <abc></abc>
</div>
<div id="app2">
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>

vue代码：

// 这里就是MVVM中的View Model
let vue1 = new Vue({
   
    el: '#app1',
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});
// 这里就是MVVM中的View Model
let vue2 = new Vue({
   
    el: '#app2',
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    },
    // 专门用于定义局部组件的
    components: {
   
        "abc": {
   
            // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
            template: "#info"
        }
    }
});

组件中的data和methods

自定义组件中的data和methods
Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中也能使用data和methods

自定义组件中data注意点
在自定义组件中不能像在vue实例中一样直接使用data
而是必须通过返回函数的方式来使用data

html代码：

<div id="app">
    <!--
    由于我们是在Vue实例控制的区域中使用的函数
    所以系统会去Vue实例中查找有没有对应的方法
    所以我们需要在Vue实例中实现对应的方法
    -->
    <button @click="appFn">我是按钮</button>
    <!--
    由于我们是在Vue实例控制的区域中使用了数据
    所以系统回去Vue实例中查找有没有对应的数据
    所以我们需要在Vue实例中添加对应的数据
    -->
    <p>{
  {appMsg}}</p>
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <!--
        由于我们是在自定义组件中使用了函数
        所以系统会去自定义的组件中查找有没有对应的方法
        所以我们需要在自定义的组件中实现对应的方法
        -->
        <button @click="abcFn">我是按钮</button>
        <p>{
  {abcMsg}}</p>
    </div>
</template>

vue代码：

// 自定义全局组件
Vue.component("abc", {
   
    // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
    template: "#info",
    methods: {
   
        abcFn(){
   
            alert("abcFn");
        }
    },
    // data: {
   
    //     abcMsg: "学院"
    // }
    // 注意点: 虽然在自定义的组件中也可以使用data, 但是在使用的时候, 使用的方式和Vue实例中不太一样
    //         在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据
    data: function () {
   
        return {
   
            abcMsg: "学院"
        }
    }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
        appMsg:"知播渔"
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
        appFn(){
   
            alert("appFn");
        }
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

组件中的data为什么是一个函数

自定义组件中的data为什么是一个函数
因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数

html代码：

<!--
1.自定义组件中的datadata为什么是一个函数
因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <abc></abc>
    <abc></abc>
    <abc></abc>
</div>
<template id="info">
    <div>
        <button @click="add">累加</button>
        <p>{
  {number}}</p>
    </div>
</template>

vue代码：

// 自定义全局组件
Vue.component("abc", {
   
    template: "#info",
    /*
    组件中的data如果不是通过函数返回的, 那么多个组件就会公用一份数据, 就会导致数据混乱
    如果组件中的data是通过函数返回的, 那么每创建一个新的组件, 都会调用一次这个方法
    将这个方法返回的数据和当前创建的组件绑定在一起, 这样就有效的避免了数据混乱
    * */
    data: function () {
   
        return {
   
            number: 0
        }
    },
    methods: {
   
        add(){
   
            this.number++;
        }
    }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

组件切换

组件切换
对于普通的元素我们可以通过v