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

2024-01-31 14:34:52

组件是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>

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

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

码农公寓

组件注册与使用

相关文章