Vue3核心概念之组件 vue3 组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

每个组件内封装自定义内容与逻辑，下面来看一下最基础的组件是怎么定义和使用。

首先，定义组件（App.vue）

<template>
   <div>第一个组件</div>
</template>

接着在main.ts使用组件

// 导入vue的依赖
import { createApp } from 'vue'
// 引入样式
import './style.css'
// 导入组件
import App from './App.vue' 
// 把App组件挂载到index.html的id为#app的div上
createApp(App).mount('#app')

下面来看一下index.html的定义，可以看到通过script引入了main.ts,脚本执行的时候，把App组件挂载到了页面id为#app的div上，也就是组件树的根节点。

上面已经可以基本了解组件的应用，实际上，组件还有非常丰富的组成部分，下面来逐步丰富这个组件的内容。

与Vue2相比，Vue3实现了组合模式，主要体现在组件的script部分。

组件的主要组成部分有template(组件的结构定义），script（数据以及逻辑交互），style（UI布局和美化）。

下面，先介绍第一个生命周期setup,可以认为这是一个配置阶段，我们给页面添加个按钮，动态改变App.vue的div的内容。

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">点击我</button>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  setup() {
    var message = ref("第一个组件");
    console.log(message);
    var changeMessage = () => { message.value = "点击了按钮" + new Date() };
    return {changeMessage,message}
  }
}
</script>

通过在script标签里声明为setup,可以更加简洁，所有在标签里顶层的变量和方法会自动包装到setup函数的返回值里，从而在模板中可以直接引用

<template>
   <div>{{message}}</div>
   <button @click="changeMessage">点击我</button>
</template>

<script lang="ts" setup>
var message="第一个组件";
var changeMessage=()=>{message="点击了按钮"+new Date()};
</script>

可以看到代码简洁了很多。解释一下上面代码的含义，定义一个变量message，点击按钮，修改message的值，message被绑定到了div上。运行起来之后，可以发现上面的代码并没有像我们预期的那样，点击修改掉div的内容。

那是因为message并不是响应式的变量，下面来改造一下

<template>
   <div>{{message}}</div>
   <button @click="changeMessage">点击我</button>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
var message=ref("第一个组件");
var changeMessage=()=>{message.value="点击了按钮"+new Date()};
</script>

通过ref函数，把message做了包装，使得message有了响应性（响应性相关的内容请关注后续的文章）。

这时候我们就完成了数据和页面的交互。

每天学习进步一点点，喜欢的请点点关注，后续给大家带来更多相关的内容。