VUE组件相关使用

一、组件的使用

1. 组件之间的通信

父组件向子组件传递信息使用：props（属性）

子组件向父组件传递信息使用：emits（事件）

无关系组件之间（兄弟组件、毫无关系的组件等）的通讯：自定义事件，推荐使用第三方插件eventemitter3，使用方法与vue 2.0自定义事件相同

event.js

const EventEmitter = require(‘eventemitter3’);

export default new EventEmitter();

组件1：

event.emit(‘GetTitle’, ‘hello world’);

组件2：

event.on(‘GetTitle’, this.getTitle);

注：在页面进行跳转的时候，要进行事件的解绑

1. 1. 组件的生命周期

   2. 1. 单个组件：要知道created mounted区别
      2. 父子组件：父组件与子组件的生命周期的加载顺序

二、组件slot

1. 1. 基本使用

父组件往子组件插入内容，子组件通过slot标签渲染父组件传过来的值，可以设定默认值

1. 2.作用域插槽

是子组件传props出来给父组件，然后父组件在template上写v-slot引入prop即可

1. 3.具名插槽

就是在子组件的slot上写name，在引用的组件中写template上的v-slot写对应的名称，也可以默认不写。

三、动态组件

，就是用data跟组件名称映射

四、vue异步渲染

异步渲染，等待data修改整合后，再渲染dom,dom渲染完毕后调用$nextTick回调函数

五、组件缓存keep-alive

框架层级的缓存,跟v-show不一样

六、Mixin（混入）

多个组件有相同的逻辑，抽离出来，

mixin: [mixin] //与当前组件的script合并，起到逻辑提取复用，多个mixin容易data、method命名冲突。

多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

局部混入：

//mixin.js文件
export default {
    data(){
        return {
            name: 'mixin'
        }
    },
    created: function(){
        this.hello()
    },
    methods: {
        hello: () =>{
            console.log('hello from mixin!');
        }
    }
}

//vue文件
<template>
  <p>这是文字</p>
</template>

<script>
import mixin from '@/views/common/mixin'
export default {
  mixins: [mixin]
}
</script>

全局混入：

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

最后

以上就是潇洒草丛为你收集整理的VUE组件相关使用的全部内容，希望文章能够帮你解决VUE组件相关使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。