概述

无论是在 Angular，还是在 Vue，组件传输数据都是一个重要的功能。组件之间传输数据的方式有很多种，本文主要介绍在 uni-app 中常用的几种方式。

在 angular 里面，我大概知道存在有 3 种方式进行组件之间的数据传输：

1. @Input () 和 @Output ()：通过输入属性和输出事件来实现父子组件之间的数据传输。
2. 服务（Service）：通过共享服务来实现跨组件的数据共享。
3. 状态管理（如 NgRx）：通过全局状态管理来实现组件之间的状态共享。

在 uni-app 中，我们也可以借鉴这些思路来实现组件之间的数据传输。

父子组件传值

父子组件传值是最常见的组件通信方式。父组件通过 props 向子组件传递数据，子组件通过事件向父组件传递数据。

父组件向子组件传值

父组件通过 props 向子组件传递数据。

对于较为基础的内容，分为显示用途的内容和交互用途的内容。

显示类组件

• <text>：文本显示
• <icon>：图标显示
• <rich-text>：富文本显示
• <progress>：进度条
• <canvas>：画布
• <web-view>：嵌入网页

交互类组件

表单

• <button>：按钮
• <checkbox>：复选框
• <form>：表单
• <input>：输入框
• <label>：标签
• <picker>：选择器
  • 普通选择器
  • 多列选择器
  • 时间选择器
  • 日期选择器
  • 省市区选择器
• <picker-view>：滚动选择器
  • 要搭配上 <picker-view-column> 使用
• <radio>：单选框
• <slider>：滑块
• <switch>：开关
• <textarea>：多行输入框

页面跳转

• <navigator>：页面链接

checkbox

概述

在 uni-app 中，支持以下的平台：

#ifdef、#ifndef 条件编译

在实现多平台兼容的时候可以使用 #ifdef 和 #ifndef 来进行条件编译。

#ifdef：如果满足条件，则编译该部分代码。

#ifndef：如果不满足条件，则编译该部分代码。

模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序</view>
    <!-- #endif -->
    <!-- #ifdef APP-ANDROID -->
    <view>APP</view>
    <!-- #endif -->
    <!-- #ifndef APP-IOS -->
    <view>IOS</view>
    <!-- #endif -->
    <!-- #ifndef APP-APP-HARMONY -->
    <view>鸿蒙</view>
    <!-- #endif -->
    <!-- #ifndef WEB -->
    <view>网页</view>
    <!-- #endif -->
</template>

export default {} 里的内容，是页面的主要逻辑代码。包括几部分：

1. data：template 模板中需要使用的数据。
2. 页面生命周期：如页面加载、隐藏、关闭，具体 见下
3. methods 方法，如按钮点击、屏幕滚动
4. computed 计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script>
export default {
    data() {
        return {
            title: "点我", // 定义绑定在页面上的data数据
            // 多个data在这里继续定义。逗号分隔
        }
    },
    onLoad() {
        // 页面启动的生命周期，这里编写页面加载时的逻辑
        this.helloWorld();
    },
    // 多个页面生命周期监听，在这里继续写。逗号分隔
    methods: {
        buttonClick: function () {
            this.title = "被点了"
        },
        helloWorld: function () {
            alert("Hello World");
            this.test();
        },
        test() {
            alert("hello");
        }
        // 多个方法，在这里继续写。逗号分隔
    },
    computed: {
        // 计算属性
    }
};
</script>

生命周期

参考资料

1. 页面 | uni-app 官网

概述

uni-app 支持标准的 CSS 样式属性，本文档整理了常用的 CSS 属性，按功能分类便于查阅。

布局相关属性

Flexbox 布局

定位属性

尺寸属性

概述

在 uni-app 中，容器组件用于布局和组织页面内容。

<view> 组件

如果使用 nvue，则需注意，包裹文字应该使用 <text> 组件。

1
2
3

<view class="container">
    <text>Hello, uni-app!</text>
</view>

属性

<scroll-view> 组件

<template> 部分

<template> 部分是 Vue 组件的模板部分，用于定义组件的结构和布局。它使用类似 HTML 的语法来描述组件的 UI。

<style> 部分

<style> 部分用于定义组件的样式。可以使用普通的 CSS，也可以使用预处理器如 SCSS、LESS 等。通过添加 scoped 属性，可以使样式仅作用于当前组件，避免样式冲突。

<script> 部分

<script> 部分是 Vue 组件的逻辑部分，用于定义组件的行为和数据。它使用 JavaScript 语法来编写组件的逻辑，包括数据定义、方法、生命周期钩子等。