vue组件

￡神魔★判官ぃ 2023-01-17 03:22 7阅读 0赞

# vue 的组件 #

1.  组件是可复用的 Vue 实例，且带有一个名字：
2.  因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
3.  组件模板必须只能存在一个根元素

## 组件的注册 ##

### 全局注册 ###

Vue.component('自定义的组件名', 组件的配置项)
    // 组件的配置项 : template, data, methods, computed , filter .... 等属性
    
    Vue.component('自定义的组件名', {
        template:``
    })

### 组件名 ###

1.  连字符：都使用小写字母形式： 因为 html对大小写不敏感，会自动转换为小写形式
2.  驼峰命名：当使用时，如果在HTML中转换为连字符形式， 如果在模板字符串中或者单文件组件中则不受限制

### 组件中的data属性 ###

组件中的data必须是一个函数； 每个实例可以维护一份被返回对象的独立的拷贝；实例的data属性就都是独立的，不会相互影响 ；也是为了和 vue 实例中的data 进行区分

### 局部注册 ###

在组件内部使用 components 属性进行局部注册； 以后推荐使用局部注册

new Vue({
      el: '#app',
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB
      }
    })

## 组件的传值方式 ##

1.  父子传值（通信）
2.  子父传值(通信)
3.  非父子传值(通信)

### 组件的关系 ###

1.  父子关系
2.  非父子关系

### 组件父子通信 ###

通过 prop属性实现

1.  传递一个静态的数据： 在组件标签上自定义一个属性，并赋值

<组件标签名 自定义属性='value'></组件标签名>

在子组件的内部，通过 props 选项进行接受 `props:['自定义属性名']`； 接受后可以在组件内部使用， 使用的方式和data中的数据一样

Vue.component('自定义的组件名', {
        template:`<div>接受后可以在组件内部使用， 使用的方式和data中的数据一样</div>`
        props:['组件标签上自定义属性名']
    })

1.  传递一个动态的数据： 父子通信 需要在组件标签上绑定自定义属性，自定属性的值是父组件中的data中的key数据

<组件标签名 v-bind:自定义属性='父组件中data中的key'></组件标签名>

在子组件的内部，通过 props 选项进行接受 `props:['自定义属性名']`； 接受后可以在组件内部使用， 使用的方式和data中的数据一样

### 组件子父通信 ###

$on() 和 $emit()

子父通信需要通过事件进行传递， 通过 $emit() 和$on() 实现； $emit()触发一个自定义事件， $on()监听自定义事件 **$on() 和 $emit() 必须属于同一个对象，才能进行监听； $on()通常在created中进行监听**

$emit()用法

//  单纯触发一个自定义事件
    vm.$emit('自定义事件名')
    //  可以接受第二个参数， 传递数据
    vm.$emit('自定义事件名', data)

$on()用法

vm.$on('监听自定义事件', (data) => {
        // 回调函数的参数data就是传递的数据
    })

子父通信

1.  触发事件：在子组件内部定义一个原生事件，通过该原生事件触发一个自定义事件

// 在方法中通过this.$emit() 触发
    Vue.component('自定义的组件名', {
        template:`
            <div>
                <button @click='send'>按钮</button>
            </div>
        `,
        methods:{
            send(){
                this.$emit('自定义事件名', data)
            }
        }
    })
    
    // 在字符串模板中 直接 通过 $emit()触发
    Vue.component('自定义的组件名', {
        template:`
            <div>
                <button @click="$emit('自定义事件名', data)">按钮</button>
            </div>
        `,
    })

1.  监听事件： 在组件标签上 通过 v-on监听自定义事件 `v-on:自定义事件名='父组件中的methods中的方法'`； 父组件中必须存在对应的方法

// 通过绑定父组件中的方法名
    <组件标签名 v-on:自定义事件名='父组件中methods中的方法'></组件标签名>
    
    // 直接在组件标签上进行事件处理  通过 $event 事件对象获取数据
    <child v-on:changefontsize='fontSize += $event'></child>

1.  完整的代码

<div id="app">
        <p :style="{fontSize:fontSize + 'px'}">hello world</p>
    
        
        <child v-on:changefontsize='changeFont'></child>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('child', {
            template:`
                <div>
                    <button @click='$emit("changefontsize", 1)'>方法字体 实现方式1</button>
                    <button @click='changeFont'>方法字体 实现方式2</button>
                </div>
            `,
            methods:{
                changeFont(){
                    // 实现方式2
                    this.$emit("changefontsize", 1)
                }
            }
        })    
        const app = new Vue({
            el:'#app',
            data:{
                fontSize:20
            },
            methods:{
                changeFont(data){
                    this.fontSize += data;
                }
            }
        })
    </script>

## vue的插槽 ##

### 插槽概念 ###

vue提供了一套内容分发机制的API，将 <slot> 元素作为承载分发内容的出口。 就是插槽

### 插槽的分类 ###

1.  默认插槽
2.  具名插槽
3.  作用域插槽

### 默认插槽 ###

`<slot>`标签用于组件模板内

1.  定义一个默认插槽

const child = {
        template:`
            <div>
                <slot></slot>
            </div>
        `
    }

1.  内容分发 : 在组件标签内使用

<组件标签> 
        <template>
            分发的内容
        </template>
    </组件标签>

### 具名插槽 ###

给 `<slot>` 标签添加一个name属性， 自定义插槽的名字，`<slot name='自定义插槽名'></slot>`

1.  定义具名插槽

const child = {
        template:`
            <div>
                <slot></slot>
                <slot name='自定义插槽名'></slot>
            </div>
        `
    }

1.  使用具名插槽 必须结合 v-slot 指令 绑定插槽， v-slot指令只能用于 template 标签上（vue内置的标签）

<组件标签> 
        <template v-slot:自定义插槽名>
            分发的内容  具名插槽
        </template>
    
         <template v-slot:default>
            分发的内容 默认插槽
        </template>
    </组件标签>

### 作用域插槽 ###

本质是用来传递数据

1.  定义一个作用域插槽

// value 就是传递的数据
    const child = {
        template:`
            <div>
                <slot 自定义属性名1='value1' 自定义属性名2='value2'></slot>
                <slot name='自定义插槽名' 自定义属性名1='value1' 自定义属性名2='value2'></slot>
            </div>
        `
    }

1.  使用作用域插槽： 接受数据 *接受数据 通过 带表达式的v-slot 指令进行接受， `v-slot='自定义名字'`， 可以用任何你喜欢的名字进行接受， 接受的结果是一个对象集合， 包含了所有的数据*

<组件标签> 
        <template v-slot='自定义名字'>
            分发的内容  默认插槽
        </template>
    
         <template v-slot:自定义插槽名='自定义名字'>
            分发的内容 具名插槽    自定义属性名 对应的是slot标签上的自定义属性名
            {
      {通过自定义名.自定义属性名}}
        </template>
    </组件标签>

### 插槽的默认值 ###

定义插槽是可以给插槽提供默认值（后备内容）； 如果没有提供具体的值，会显示默认值， 如果提供了具体的值，则会替换默认值

const child = {
        template:`
            <div>
                <slot>默认值</slot>
                <slot name='自定义插槽名'></slot>
            </div>
        `
    }

### v-slot指令的简写 ###

`v-slot:自定义插槽名` 可以进行简写， `v-slot:` 整体简写 为 `#` , `#自定义插槽名`

## 组件标签和HTML标签的区别 ##

1.  标签上属性的区别
    
     *  组件标签上添加属性（自定义属性）意味着是数据传递，需要在组件模板内 通过 prop 接受
     *  html标签上添加属性 就是标签的属性
2.  绑定事件的区别
    
     *  HTML标签上绑定的事件是原生事件
     *  组件标签上绑定的事件都是自定义事件，需要通过 `this.$emit()` 进行触发
3.  标签内添加内容
    
     *  html标签内添加内容就是标签的内容
     *  组件标签内添加内容，如果没有`<slot></slot>`标签存在，则会被忽略，如果`<slot></slot>`标签存在，则是进行内容分发