Vue 组件

1. 页面中的一部分，可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例。

2. Vue组件：

　　全局组件：

　　　　定义：Vue.component("组件的名字",{

                   　　　　template:"<div>组件模版的内容</div>"

               　　　})

　　　　使用：<组件的名字></组件的名字>

　　　　注意：不能使用驼峰式命名（可以用 - 的形式），不能和现有标签重名menu header process

　　局部注册组件的定义 (常用)：

    　　　var 组件的名字 = {

       　　　　 template:"<div>组件的内容</div>"

   　　　 }

    　　　new Vue({

        　　　　.....

            　　   components:{   ／／局部注册

              　　 　　key:组件的名字

           　　　}

        　　　　.....

        　　})

    　　　<组件的名字></组件的名字>

　　组件里的数据：

   　　 data(){       // 为了保证每个组件的实例数据是独立的

        　　return {

            　　key:value

       　 　}

    　　}

　　组件的事件响应（在父组件里）：

    　　    <组件 v-on:事件.native＝“事件处理函数" />

 

3. 父组件给子组件传值：

　　<组件  属性="传给子组件的值"></组件>

      　　v-bind:属性="识别数据类型和变量"  

　　　  不用v-bind，传递的都是字符串

　　子组件通过props选项  

　　　   props:["属性"]

       　   props:{

           　　属性：类型

       　　}

       　　props:{

          　　  属性：{

            　　　　type:类型

         　　 　}

      　　 }

　　注意：父组件传给子组件的值不能更改（单向数据流）

　　　　　可以把这个值赋值给子组件data里的变量，更改子组件里data里的那个变量

 

4. prop验证：

　　props:{

          　　  属性：{

            　　　　type:类型，

            　　　　required：true,  　　// 必须传递这个属性

            　　　　default:值,  　　// 设置默认值

            　　　　validator(值){　　// 自定义验证条件

               　　　　　return 布尔表达式

            　　　　}

         　　 　}

      　　 }

 

5. 子组件向父组件传值:

　　父组件先监听自定义事件 v-on：自定义事件

       子组件发送数据 this.$emit("事件名"，“数据“)

       父组件通过执行事件处理函数，通过事件对象拿到子组件传过来的值

 

7. 兄弟组件的传值:

　　通过公共的父组件进行传值

　　双向绑定一个组件,可以以value属性传递这个值,子组件用input事件，发送新值修改这个值

 

8. 通过vuebus进行传值

　　vue的实例上有个连接方法 $on $emit

　　1）vuebus = new Vue()   也可以用公共的父组件 this.$parent

　　2）发送  vuebus.$emit("事件","数据")

　　3）created  vuebus.$on("事件",(data)=>{ }) data 就是拿到的数据

 

 

9. 插槽：slot

1. 组件预留给客户的空间，提高扩展性

2. <slot></slot>匿名插槽  

    <slot name="插槽名"><slot> 具名插槽

    <组件> <tag slot="插槽的名字"></tag></组件>　　（老方法）

3. v-slot:插槽名

　　简写为 #插槽名

　　补充：#default 对应默认的插槽

　　<template v-slot:插槽的名字="子组件通过插槽传过来的数据">....</template> 

　　<slot :属性="变量"></slot>  数据插槽

4. 插槽传值：

　　<slot :属性="变量"></slot>  数据插槽

 

补充：组件的五大部分：定义和使用，传值，生命周期的钩子函数，动态组件，插槽