Uni-app 学习笔记 02：事件、导航、组件通信和生命周期

#

前言

在上一篇文章中，我们介绍了 Uni-app 的基础知识。在本篇博客文章中，我们将深入探讨 Uni-app 中的一些重要概念，包括事件、导航跳转、组件创建和通信以及组件生命周期。这些概念对于构建交互式且响应迅速的 Uni-app 应用程序至关重要。

事件是在用户或系统与应用程序交互时触发的动作。在 Uni-app 中，可以使用 @click、@submit 等事件侦听器来响应这些事件。例如：

<template>
  <button @click="handleButtonClick">按钮</button>
</template>

<script>
  export default {
    methods: {
      handleButtonClick() {
        console.log("按钮被点击了！");
      }
    }
  }
</script>

导航跳转允许我们在不同的页面之间切换。在 Uni-app 中，可以使用 uni.navigateTo、uni.redirectTo 和 uni.switchTab 等方法实现导航。例如：

uni.navigateTo({
  url: '/pages/detail/detail'
});

组件是可重用的代码块，可用于创建应用程序的用户界面。在 Uni-app 中，可以使用 uni.createComponent 方法创建组件。例如：

uni.createComponent({
  name: 'my-component',
  template: `<view>这是一个组件</view>`,
  props: ['name'],
  methods: {
    sayHello() {
      console.log("你好，" + this.name + "！");
    }
  }
});

组件通信允许组件之间交换数据。在 Uni-app 中，可以通过 props 和 events 实现组件通信。例如，父组件可以通过 props 向子组件传递数据：

// 父组件
<my-component name="张三"></my-component>

// 子组件
<template>
  <view>你好，{{name}}！</view>
</template>

<script>
  export default {
    props: ['name']
  }
</script>

子组件可以通过事件向父组件发送数据：

// 子组件
<template>
  <button @click="handleButtonClick">按钮</button>
</template>

<script>
  export default {
    methods: {
      handleButtonClick() {
        this.$emit('buttonClick', '我是子组件！');
      }
    }
  }
</script>

// 父组件
<my-component @buttonClick="handleButtonClick"></my-component>

<script>
  export default {
    methods: {
      handleButtonClick(message) {
        console.log(message);
      }
    }
  }
</script>

组件生命周期是指组件从创建到销毁的各个阶段。在 Uni-app 中，组件生命周期包括以下几个阶段：

• created：组件实例被创建后触发。
• mounted：组件实例被挂载到 DOM 后触发。
• updated：组件实例更新后触发。
• destroyed：组件实例被销毁前触发。

可以使用以下生命周期钩子来响应这些阶段：

export default {
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
}

总结

在本篇文章中，我们讨论了 Uni-app 中的事件、导航跳转、组件创建和通信以及组件生命周期。这些概念对于构建交互式且响应迅速的 Uni-app 应用程序至关重要。通过理解并有效使用这些概念，开发人员可以创建高效且可维护的 Uni-app 应用程序。