Vue-05-组件

今天，给大家介绍一下组件！

A：组件：（component）；

1.什么是组件？

组件是vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码；
组件是自定义元素（对象）；

2.定义组件的两种方法：

方法1：先创建一个组件构造器，然后用组件构造器来创建组件；
方法2：(推荐)使用vue.compontent（）根据组件构造器来创建组件；




    
    Document


    
            /*---自定义标签名建议小写，包含短横线‘-’---------------*/
           /*---组件名不能用HTML元素‘-’---------------*/

3.组件的分类：全局组件和局部组件；

1>.全局组件，可以在所有vue实例中使用；

2.>局部组件只能在当前vue实例中使用；




    
    Document

注：1.组件中可以写多个Vue.component;

2.data在组件中存储数据时，必须以函数的形式，函数返回一个对象；

4.组件间的数据传递：

A.父子组件：在一个组件内部定义另一个组件；

2.>父传子`[子组件访问父组件的数据]（用属性传）:`

a.在调用子组件时，绑定想要获取的父组件的数据；
b.在子组件的内部，使用props选项声明获取的数据，即接收来自父组件的数据；
总结：父组件通过props向下传递数据给子组件；
注：组件中的数据共有三种形式：data,computed,props;
父传子：通过属性props传，（子组件通过props接收数据）；
props类型：数组（Array），字符串（String），对象（Object）；

3.>子传父“（父组件访问子组件的数据）【用事件传】：”

a.在子组件使用vm.$emit(事件名，数据)触发一个自定义事件，事件名自定义；
b.父组件在使用子组件的地方监听子组件触发的事件，并在父组件定义方法，用来获取数据；
总结:子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件；

B.非父子间传值：（通信）

非父子组件间的通信，可以通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件；

Var Event=new Vue();
Event.$emit(事件名，数据)；
Event.$on(事件名，data=>{});

箭头函数：箭头函数就是没有function关键字，而是一个类似箭头的函数；

var a=()=>{return1;}
相当于：
function a(){return 1;}