Vue组件与插槽

目录

一、什么是组件？

组件化和模块化的不同：

全局组件定义的四种方式：

二、 组件中展示数据和响应事件

三、使用components属性定义局部子组件

四、使用:is属性来切换不同的子组件，并添加切换动画

五、slot插槽

1、插槽的使用

2、插槽的使用 - 具名插槽

3、插槽的使用 - 默认插槽

---

一、什么是组件？

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

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

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

全局组件定义的四种方式：

使用 Vue.extend 配合 Vue.component

let son1 = Vue.extend({
    template:'<h2>底部</h2>'
})
Vue.component('son1',son1)

直接使用 Vue.component

        Vue.component("son2",{
            template:"<h2>底部2</h2>"
        })

将模板字符串，定义到script标签中，

    <script type="x-template" id="son3">
        <h2>底部3</h2>
    </script>

同时，需要使用 Vue.component 来定义组件

 Vue.component("son3",{
            template:"#son3"
        })

将模板字符串，定义到template标签中，同时，需要使用 Vue.component 来定义组件（一般都是使用这种方式）

<template