0
点赞
收藏
分享

微信扫一扫

《图解Vue3.0》- 第10节 组件注册与使用

mjjackey 2022-09-01 阅读 31


组件是vue中最推崇的,也是最强大的功能之一,就是为了提高代码重用性,减少重复性的开发。那么vue组件拥有哪些功能如何使用呢?以下是常用的功能点,也是最基础的。

  • 数据管理
  • 组件其他属性(methods,watch,computed)
  • 生命周期
  • 组件的复用和组合
  • 组件间通信
  • 动态组件和异步组件

接下来的篇幅里会从组件的定义到组件的进阶一一深入学习。

注册方式,官网地址:
​​​ https://vue3js.cn/docs/zh/guide/component-registration.html#%E7%BB%84%E4%BB%B6%E5%90%8D​​

组件注册与使用

在这里就不介绍那种在原生html里面的注册方式了,直接来看如何基于node的开发模式下如何局部的注册使用组件。

这里的注册方式就是定义一个.vue的组件,然后在你需要使用的地方import进去使用即可。组件可以多次使用,且内部的状态都是独立的。

额~这一节貌似没什么可说的东西,举个例子,这个组件从几个颜色中,随机取一个赋值给文字。

HelloWorld.vue

<template>
<div class="hello">
<h1 :style="style">{{ msg }}</h1>
<el-button type="primary" @click="changeColor">主要按钮</el-button>
</div>
</template>

<script>export default {
name: 'HelloWorld',
data() {
return {
msg:'Hello World',
style: { color: 'red' }
};
},
methods: {
changeColor() {
const colors = ['red', 'yellow', 'black', 'blue', 'pink'];
const random = Math.floor(Math.random() * colors.length);
this.style.color = colors[random];
},
}
}</script>

<style scoped>

</style>

App.vue

<template>
<HelloWorld></HelloWorld>
<HelloWorld></HelloWorld>
<HelloWorld></HelloWorld>
</template>

<script>import HelloWorld from './components/HelloWorld';

export default {
name: 'App',
components: {
HelloWorld,
}
}</script>

《图解Vue3.0》- 第10节 组件注册与使用_html

如果文章能够对您有所帮助,我便感到十分荣幸。如若文章能被您点赞,那便是万分荣幸。


公众号:前端微说
个人网站:www.iotzzh.com
github地址:https://github.com/956159241/TuJieQianDuan


举报

相关推荐

0 条评论