vue-组件

组件

在html中我们学习的最小单元是标签。

在vue中我们学习的最小单元是组件。

组件是我们自己扩展的HTML元素，封装可重用的代码。

在较高层面上，组件是自定义元素，vue.js为它添加了特殊的功能。

组件(component)是vue.js最强大的功能之一。在vue中一切皆是组件。

在let vm = new Vue({})中得到的vm是Vue的一个实例，它也可以理解为一个组件，只不过它是一切组件的根组件。以示区别：以下都是说定义子组件。

组件注册有两种：

全局注册组件：
Vue.component(组件名,配置对象（组件对象）)

<div id="app1">
    <my-header></my-header>
</div>
<div id="app2">
    <my-header></my-header>
</div>
<script src="./vue.js"></script>
<script>
    Vue.component('my-header',{
        template:'<h1>我是一个vue的组件</h1>'
    })
    
    let vm1 = new Vue({
        el:'#app1'
    })

    let vm2 = new Vue({
        el:'#app2'
    })
</script>

注：全局注册的组件在所有的实例都可以使用。

局部注册组件：
在根组件的配置对象中添加components选项

let vm = new Vue({
    el:'#app',
    components:{
        '组件名1'：组件对象1,
        '组件名2'：组件对象2
    }
})

注：局部：只能在当前实例内使用

组件使用的基本流程：
1.定义-组件对象

如果组件够复杂时，需要额外定义一个对象。如果组件足够简单，直接到第二步。

前面的my-header和my-footer这个只是注册时给组件起的名字，他们并不属于对象的范畴。

2.注册-给组件对象注册一个名字

告诉vue，这个组件属于哪个实例，在哪里可以使用。

3.使用-用组件的注册名

在视图中引用注册时取得组件名

注：

1>不能使用现有的标签名

定义组件对象
组件对象就是js中的对象，只不过它的属性特殊，它的属性和vue的配置项一模一样的，template是必须要有的。其他的配置项是可以省略的。

let 组件对象名 = {
    template:,
    data(){
        return {}
    },
    methods:{
        
    },
    computed:{
        
    }
    ...
}

根组件
组件
|
区别：

1.根组件(vue的实例)它有el，组件有template

2.data的写法不同，根组件的data值是对象，组件的data是函数

template的写法

报错图片：

解决办法：

template有三种写法：

1.字符串，数组

2.template标签
3.script标签

组件的三个名字：
定义名

注册名

使用名

组件的传值分为三种情况：
传递的值，分传值和传引用

1.父向子传递

2.子向父传递

3.非父子传递

父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

非父子之间的传值
main.js

Vue.prototype.bus = new Vue();

this.bus.$emit(事件名,传递的数据)

this.bus.$on(事件名,(data) => {})

为什么要做成组件？
唯一的目标就是重用。

一个组件做好后，可以快速的，改参数，改配置就可以得到多个组件的效果。

slot插槽
无名插槽和具名插槽
例：折叠面板

作用域插槽
动态组件
动态组件可以使用同一个挂载点，然后动态的在他们之间切换

实现方法：使用Vue里的标签外加一个is属性来实现

component标签相当于一个占位符，组件名设置为那个组件，则就是把对应的组件放入到component标签中。

keep-alive 缓存组件
exclude：排除哪些组件不缓存

include：哪些组件被缓存

测试：created钩子函数来测试