详解vue 组件

vue的两大核心

1. 数据驱动 - 数据驱动界面显示

2. 模块化 - 复用公共模块，组件实现模块化提供基础

组件基础

组件渲染过程

template ---> ast（抽象语法树） ---> render ---> vdom(虚拟dom) ---> 真实的dom ---> 页面

vue组件需要编译，编译过程可能发生在

• 打包过程 （使用vue文件编写）
• 运行时（将字符串赋值template字段，挂载到一个元素上并以其 dom 内部的 html 作为模板)

对应的两种方式 runtime-only vs runtime-compiler

runtime-only（默认）

• 打包时只包含运行时，因此体积更少
• 将template在打包的时候，就已经编译为render函数，因此性能更好

runtime-compiler

• 打包时需要包含（运行时 + 编译器），因此体积更大，大概多10kb
• 在运行的时候才把template编译为render函数，因此性能更差

启用runtime-compiler

vue.config.js（若没有手动创建一个）

module.exports = {
 runtimecompiler: true //默认false
}

组件定义

1. 字符串形式定义（不推荐）

例子

const custombutton = {
 template: "<button>自定义按钮</button>"
};

这种形式在运行时才把template编译成render函数，因此需要启用运行时编译（runtime-compiler）

2. 单文件组件（推荐）

创建.vue后缀的文件，定义如下

<template>
 <div>
 <button>自定义按钮</button>
 </div>
</template>

<template> 里只能有一个根节点，即第一层只能有一个节点，不能多个节点平级

这种形式在打包的时就编译成render函数，因此跟推荐这种方式定义组件

组件注册

1. 全局注册

全局注册是通过vue.component()注册

import custombutton from './components/componentdemo.vue'
vue.component('custombutton', custombutton)

优点

• 其他地方可以直接使用
• 不再需要components指定组件

缺点

• 全局注册的组件会全部一起打包，增加app.js体积

适合

• 基础组件全局注册

2. 局部注册

在需要的地方导入

<template>
 <div id="app">
 <custombutton></custombutton>
 </div>
</template>
<script>
import custombutton from "./components/componentdemo.vue";

export default {
 name: "app",
 components: { custombutton }
};
</script>

优点

• 按需加载

缺点

• 每次使用必须导入，然后components指定

适合

• 非基础组件

组件使用

组件复用

<template>
 <div id="app">
 <img alt="vue logo" src="./assets/logo.png" />
 <custombutton></custombutton>
 <custombutton></custombutton>
 <custombutton></custombutton>
 </div>
</template>

custombutton 组件

<template>
 <div id="app">
 <button @click="increment">click me {{times}} times</button>
 </div>
</template>
<script>
export default {
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 return this.times++;
 }
 }
};
</script>

每个组件都会创建一个新实例，组件的data必须是function，因为每个实例维护自己的data数据

组件传参

1. 通过props属性

定义一个button，按钮文本通过props传入

<template>
 <button> {{buttontext}} </button>
</template>
<script>
export default {
 props: {
 buttontext: string
 }
};
</script>

调用者通过attribute传入

<custombutton buttontext="button 1"></custombutton>
<custombutton buttontext="button 2"></custombutton>
<custombutton buttontext="button 3"></custombutton>

运行效果

2. 通过插槽<slot></slot>

组件在需要替换的地方放入插槽<slot></slot>

<template>
 <button style="margin:10px"><slot>defalt button</slot></button>
</template>
<script>
export default {
 props: {
 buttontext: string
 }
};
</script>

调用者的innerhtml会替换插槽的值，若为空，使用默认的

运行效果

注意：看到是用自定义组件的innerhtml替换插槽，若插槽只有一个，可以不写name attribute，若多个插槽需指定插槽name attribute

自定义事件

1. 在组件内部调用this.$emit触发自定义事件

<template>
 <div style="margin:10px">
 <button @click="increment">
 <slot>defalt button</slot>
 </button>
 <span>click me {{times}} times</span>
 </div>
</template>
<script>
export default {
 props: {
 buttontext: string
 },
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 this.times++;
 ("increment");
 }
 }
};
</script>

2. 调用者监听自定义事件

<template>
 <div id="app">
 <custombutton @increment="handleincrement"></custombutton>
 <custombutton @increment="handleincrement">
 <span style="color:blue">button 2</span>
 </custombutton>
 <custombutton @increment="handleincrement">button 3</custombutton>
 <p>total click {{totalclicks}} times</p>
 </div>
</template>
<script>
import custombutton from "./components/componentdemo.vue";

export default {
 name: "app",
 components: { custombutton },
 data() {
 return { totalclicks: 0 };
 },
 methods: {
 handleincrement() {
 this.totalclicks++;
 }
 }
};
</script>

3. 运行效果

以上就是详解vue 组件的详细内容，更多关于vue组件的资料请关注其它相关文章！