VUE组件

【vue组件的使用以及组件通讯，需掌握！】

---

如何新建一个组件？

在components文件夹中右键新建 vue 文件

页面如何使用组件？

1.引入 

import com1 from "../components/com.vue";

2.注册

 components: {
    com1,
  },

3.像标签一样使用 （单/双标签都可）

<com1></com1>

组件通讯

1、父传子： 父组件中，子组件的标签上，自定义属性，后面跟上要传递的值，

子组件通过 props 接收（props是单向数据流）。

   props 有两种形式写法：（与data同级）

             （1）、数组形式  props: ["nav"],

             （2）、对象形式   （可以限制类型，是否必填，默认值，验证）

                          可以限制类型       type

                          是否必填              require：true

                          默认值                  default     如果是默认的引用数据类型，那么需要写成工厂函数                                                                                            function ( ) {

                                                             return{ }  [ ]

                                                        }

                           验证                      validator  返回 true 证明验证通过  false 验证失败

 2、子传父：在子组件中通过 this . $emit  （ ' 自定义事件名'  ,要传递的数据 ）

                     父组件接收事件 ：子组件的标签上     @自定义的事件名 = '' ''

拓展：在子组件标签中使用原生事件是不管用的，因为默认为自定义事件了，

需要在事件名后加  . native 转化为原生事件 

3、兄弟组件传值：在 main . js 中 定义 Vue . prototype . $bus = new Vue( )

                               使用 this.$bus.$emit( ' 自定义事件名 ' ,要传递的数据 ) 传递

                               使用 this.$bus.$on ( ' 自定义事件名 ' ,（ 传递的数据 ）=>{  } ) 接收