VUE组件开发

怼烎@ 2021-09-07 06:12 402阅读 0赞

### VUE组件开发 ###

*  一、全局组件注册
 *  二、局部组件注册
 *  三、使用组件
 *  四、组件的注意点
 *  五、vue调试工具
 *  六、父组件向子组件传值
 *   *  props属性定义规则
     *   *  1.数据类型限制
 *  七、子组件向父组件传值
 *  八、兄弟组件的传值。
 *  九、组件的插槽
 *   *  1.默认插槽
     *  2.具名插槽
     *  3.作用域插槽
 *  十、vue的动态组件

# 一、全局组件注册 #

VUE.component(组件名称，{ 
       data(){ 
       return { 
       //这使用闭包返回数据，可以使每个组件时单独的数据，互补影响。
    }
    }
       template:模板内容，可以写html,一定且只有一个根元素。可以使用es6的模板字符串。
       methods:{ 
         //方法
    },
       
    
    })

# 二、局部组件注册 #

var a = { 
      data(){ 
     return { 
    }
    }
    }
    
    new Vue({ 
        data:{ 
    
    },
       components:{ 
        a,//这样就能使用上面定义的组件，这样是局部注册组件。
        //局部组件只能再注册了的父组件中使用
    }
    
    })

# 三、使用组件 #

把组件名当做标签包住

<div id='app'>
    <组件名></组件名>
    <组件名></组件名>
    <组件名></组件名>
    //组件名可重复使用
    </div>

js中是驼峰式，字符串模板中也可以使用驼峰，html中要把大写的改成-小写

# 四、组件的注意点 #

1.组件的data必须是一个函数， 而根Vue的data可以是对象。  
2.组件必须要一个根元素。  
3. 组件的命名可以是短横线和驼峰式，但最好js中是驼峰式，html中是短横线

# 五、vue调试工具 #

# 六、父组件向子组件传值 #

子组件要增加一个props属性

<template>
    <div>{ { titleName}}</div>
    </template>
    export default{ 
    data(){ 
    return { 
               }
            },
      props:['titleName']
    }

父组件中

<template>
    <div>
    <子组件名 :title-name='msg'></子组件名>
    </div>
    </template>
    export default { 
    data(){ 
      reurn { 
      msg:'你好'
      }
    },
    component:{ 
      子组件的名字,//需要注册后才能使用
    }
    }

msg是父组件中data里的变量，title是子组件props定义好的属性。这样就能把msg这个值传给子组件了。  
子组件不能操作props里的数据，这是单向数据流

## props属性定义规则 ##

js中属性要写驼峰，html模板中要用短横线形式。但是字符串模板中都可以，因为html中是不区分大小写的。

### 1.数据类型限制 ###

# 七、子组件向父组件传值 #

<div @click='fn'>
    { 
    method:{ 
      fn(){ 
       this.$emit('事件名'，参数)
    }
    }
    }

父组件中

<子组件名  @事件名 = 'fn2($event)'>
    //$evetn来获取子组件传过来的值。
    { 
    method:{ 
      fn2(val){ 
      //val是传过来的值。
       // 处理逻辑
    }
    }
    }

即子组件触发事件后，实际上传给了父组件来执行。

# 八、兄弟组件的传值。 #

必须通过事件中心

var eventHub = new Vue()
    
    eventHub.$on('事件名'，参数)//事件监听
    eventHub .$off('事件名')//事件销毁
    
    eventHub.$emit('事件名',参数)//触发事件

第一个兄弟组件中

mouted(){ 
    eventHub.$on('事件名1')，(val)=>{ 
        //处理事件,val是传递过来的参数
    }
    }
    methods:{ 
       hand(){ 
      eventHub.$emit('另外的兄弟组件监听的事件名2',参数)
      //通过一个方法触发传递事件
    }
    }

第二个兄弟组件中

mouted(){ 
    eventHub.$on('事件名2')，(val)=>{ 
        //处理事件,val是传递过来的参数
    }
    methods:{ 
       hand(){ 
      eventHub.$emit('另外的兄弟组件监听的事件名1',参数)
        //通过一个方法触发传递事件
    }
    }

# 九、组件的插槽 #

## 1.默认插槽 ##

主要是为父组件往子组件中传入新的组件。

子组件中要预留这个位置

## 2.具名插槽 ##

<子组件>
      <父组件插入的新子组件>
      
      </父组件插入的新子组件>
      
       <父组件插入的新子组件2 slot='foot'>
      </父组件插入的新子组件2>
    
    
    
    <template slot='foot'>
       <父组件插入的新子组件3 >
      </父组件插入的新子组件3>
        <父组件插入的新子组件4 >
      </父组件插入的新子组件4>
    </template>
    
    
    <template v-slot:foot>
       <父组件插入的新子组件3 >
      </父组件插入的新子组件3>
        <父组件插入的新子组件4 >
      </父组件插入的新子组件4>
    </template>
    
    </子组件>

子组件中要预留这个位置

## 3.作用域插槽 ##

父组件可以对子组件的内容进行处理  
子组件中

<div>
           <div    v-for='item in arr' :key='item.id'>
            <slot:info='item'>
            { { item.name}}
            </slot>
    </div>
    </div>
    
    { 
    data(){ 
     return { 
         
     }
    },
    props:['arr']
    }

父组件中

<div>
    <子组件名  :arr='arr'>
       <template slot-scope='自定义一个名字,比如row'>
           //这里就能操作row,就是子组件中item的值。这样父组件就能操作子组件中的值。
          // { {row.子组件定义的名字，这里是info}}
          { { row.info.name}}//就能获取到值了
       </template>
    </子组件名>
    </div>
    { 
    data(){ 
     return { 
         arr:[
             { 
             id:1,
             name:18
    },{ 
       id:2,
       name:19
    }
    ]
     }
    },
    
    }

# 十、vue的动态组件 #

这个组件可以切换任意的组件。  
use为注册的组件名即可。