vue3——(模板应用,组件)

模板应用

Vue3 的模板应用和之前的版本基本一致,但是在一些关键点上有所不同。

Composition API

Vue3 引入了 Composition API,这是一种全新的 API 设计风格,可以更好地组织代码,提高代码的复用性和可读性。与之前的 Options API 相比,Composition API 更加灵活,并且可以将相关代码组合在一起,使得代码更加清晰和易于维护。

Composition API(组合式 API):

详细分析:Composition API 是 Vue3 中的全新API设计风格,可以更好地组织代码,提升代码的复用性和可读性。与 Options API 相比,Composition API 更加灵活,可将相关代码组合在一起,使代码更清晰易于维护。

<script setup>
// 定义一个响应式数据
const count = ref(0);

// 定义一个方法
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">递增</button>
  </div>
</template>

Setup 函数

Vue3 中使用 Setup 函数来代替之前的 created 和 data 属性,Setup 函数用于初始化组件的数据和方法。在 Setup 函数中,可以访问 props、context、attrs 等属性,并且直接返回需要的数据和方法,这样可以使得组件的结构更加清晰和简洁。

Setup 函数:

详细分析:Setup 函数取代了 Vue3 中的 created 和 data 属性,用于初始化组件数据和方法,可以访问props、context、attrs等属性。Setup函数返回需要的数据和方法,使组件结构更清晰简洁。

javascript 复制代码
<script setup>
import { ref } from 'vue';

// 定义一个响应式数据
const message = ref('你好,Vue3!');
</script>

<template>
  <p>{{ message }}</p>
</template>

Teleport

Vue3 引入了 Teleport 功能,可以让组件在 DOM 上的任何位置渲染,这样可以避免一些布局上的问题,比如弹窗组件在父组件中嵌套太多层导致样式混乱等。

Teleport(传送门):

详细分析:Vue3中的 Teleport 功能允许组件在DOM中的任何位置渲染,避免布局问题,像是嵌套导致样式冲突等。

javascript 复制代码
<template>
  <teleport to="body">
    <div>
      <p>这段内容将被渲染到 body 元素中</p>
    </div>
  </teleport>
</template>

Fragments

Vue3 支持使用 Fragments,可以在模板中直接使用多个根元素,而不需要包裹在一个父元素中。这样可以更加灵活地组织模板代码,使得代码更加简洁和易于维护。

Fragments(片段):

详细分析:Vue3支持使用 Fragments,允许模板中直接使用多个根元素,而无需包裹在父元素中,使得模板组织更加灵活,代码更加简洁。

javascript 复制代码
<template>
  <>
    <div>条目 1</div>
    <div>条目 2</div>
    <div>条目 3</div>
  </>
</template>

组件

组件注册:

在Vue3中,全局注册组件可以使用Vue.createApp().component()方法,局部注册组件可以在组件选项中使用components属性。全局注册的组件可在整个应用程序中使用,局部注册的组件只能在父组件中使用。

例子:

javascript 复制代码
// 全局注册组件
const app = Vue.createApp({});
app.component('my-component', {
  // 组件选项
});

// 局部注册组件
export default {
  components: {
    'my-component': {
      // 组件选项
    }
  }
}

组件通信

组件之间可以通过props和events实现通信。父组件通过props向子组件传递数据,子组件通过触发事件来与父组件通信。Props可以是静态或动态数据,而events则可以携带数据传递给父组件。

例子:

javascript 复制代码
// 父组件向子组件传递数据
<my-component :message="parentMessage" />

// 子组件触发事件与父组件通信
<button @click="$emit('child-event', eventData)">触发事件</button>

组件生命周期

Vue3中的组件生命周期钩子函数包括:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。这些生命周期函数可以在不同阶段执行特定逻辑或操作。

例子:

javascript 复制代码
export default {
  beforeCreate() {
    console.log('组件将要被创建');
  },
  mounted() {
    console.log('组件已挂载到DOM');
  },
  unmounted(){
    console.log('组件被销毁');
  }
}

动态组件

使用<component>元素,并将其is属性绑定到一个数据属性,这个数据属性的值是所希望动态加载的组件的名称。当数据属性的值发生变化时,Vue会自动加载对应的组件。

javascript 复制代码
<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  },
  components: {
    FirstComponent,
    SecondComponent
  }
};
</script>

在这个示例中,我们有两个组件FirstComponentSecondComponent,当用户点击按钮时,会切换显示这两个组件。currentComponent数据属性决定当前显示的组件,通过点击按钮来切换这个属性的值,从而实现动态组件的效果。

相关推荐
类人_猿41 分钟前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
汪小白JIY5 小时前
【VUE3】VUE组合式(响应式)API常见语法
vue.js·vue3·语法
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海7 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆7 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_7 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter