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数据属性决定当前显示的组件,通过点击按钮来切换这个属性的值,从而实现动态组件的效果。

相关推荐
薛一半8 分钟前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾12 分钟前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O225 分钟前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage25 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发27 分钟前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
工业互联网专业36 分钟前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
**之火1 小时前
Web Components 是什么
前端·web components
顾菁寒1 小时前
WEB第二次作业
前端·css·html
前端宝哥1 小时前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员
你好龙卷风!!!1 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js