Javascript

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

本文主要是介绍《图解Vue3.0》- 第10节 组件注册与使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

这篇关于《图解Vue3.0》- 第10节 组件注册与使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!