脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue组件

详解vue 组件

 更新时间：2020年06月11日 11:50:01   作者：WilsonPan  
这篇文章主要介绍了详解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组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue spa应用中的路由缓存问题与解决方案

    vue spa应用中的路由缓存问题与解决方案

    这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vuex中mutations与actions的区别详解

    Vuex中mutations与actions的区别详解

    下面小编就为大家分享一篇Vuex中mutations与actions的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3属性值传递defineProps详解

    Vue3属性值传递defineProps详解

    在Vue3中,defineProps()函数是定义和接收组件属性的主要方式,通过简单定义或对象定义,开发者可以灵活地接收并处理组件上的属性值,简单定义方式通过数组传递属性名,而对象定义则可以约束属性的数据类型、默认值及是否必须传递等
    2024-09-09
  • vue3.2 reactive函数问题小结

    vue3.2 reactive函数问题小结

    reactive用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式），这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下
    2022-12-12
  • VuePress 中如何增加用户登录功能

    VuePress 中如何增加用户登录功能

    VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的
    2019-11-11
  • vue引入axios同源跨域问题

    vue引入axios同源跨域问题

    这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • ElementPlus 自定义封装 el-date-picker 的快捷功能示例详解

    ElementPlus 自定义封装 el-date-picker 的快捷功能示例详解

    文章讨论了用户对官网提供的案例不满足快捷功能需求的情况,建议在外部自定义组件中导入并使用快捷内容,以满足用户需求,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-12-12
  • Vue 列表页带参数进详情页的操作(router-link)

    Vue 列表页带参数进详情页的操作(router-link)

    这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 在vue中实现iframe嵌套Html页面及注意事项说明

    在vue中实现iframe嵌套Html页面及注意事项说明

    这篇文章主要介绍了在vue中实现iframe嵌套Html页面及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue入门之数据绑定(小结)

    Vue入门之数据绑定(小结)

    本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论