混着vue复习来的，自存。

一、Vue 组件三要素

Vue代码

<!-- 1 模板区：写 HTML 结构 -->

<template>

    <view>...</view>

</template>

<!-- 2 脚本区：写逻辑（数据、方法、计算属性等） -->

<script>

export default {

    data() { return {...} },     // 数据

    methods: { ... },            // 方法

    computed: { ... },           // 计算属性

    props: { ... },              // 接收父组件数据

    components: { ... }          // 注册子组件

}

</script>

<!-- 3 样式区：写 CSS/SCSS -->

<style lang="scss">

    ...

</style>

---

二、数据绑定

语法	说明	示例
{{变量}}	插值表达式显示数据	{{title}}
:属性="值"	v-bind 动态绑定（传递变量）	:title="msg"
属性="值"	静态绑定（传递字符串）	title="标题"
v-model	双向绑定	<input v-model="name" />

JavaScript

// data 中定义数据

data() {

    return {

        title: "Hello",    // 字符串

        count: 100,        // 数字

        isShow: false      // 布尔值

    };

}

---

三、条件渲染

语法	说明
v-if="条件"	条件为 true 渲染
v-else	条件为 false 渲染
v-show="条件"	通过 CSS 显示/隐藏

Vue

<view v-if="isShow">显示</view>

<view v-else>隐藏</view>

---

四、列表渲染

Vue

<!-- v-for 循环数组 -->

<view v-for="(item, index) in list" :key="index">

    {{item}}

</view>

<!-- v-for 循环对象 -->

<view v-for="(value, key) in obj" :key="key">

    {{key}}: {{value}}

</view>

---

五、事件处理

事件	说明
@click	点击事件
@submit	表单提交事件
@change	值变化事件
@input	输入事件

Vue

<button @click="handleClick">点击</button>

<input @input="onInput" />

<script>

methods: {

    handleClick() {

        // 点击后执行

    },

    onInput(e) {

        // e.target.value 获取输入值

        console.log(e.target.value);

    }

}

</script>

---

六、表单组件

组件	说明
input	输入框
textarea	文本域
radio + radio-group	单选框
picker	滚动选择器
button	按钮

picker 使用

Vue

<picker 

    :range="arr"        <!-- 可选数组 -->

    :value="index"      <!-- 当前索引 -->

    @change="onChange"  <!-- 变化事件 -->

    name="school">       <!-- 表单提交时的字段名 -->

    <view>{{arr[index]}}</view>

</picker>

<script>

data() {

    return {

        arr: ["本科", "硕士", "博士"],

        index: 0

    };

},

methods: {

    onChange(e) {

        this.index = e.detail.value;  // 获取新索引

    }

}

</script>

form 表单提交

Vue

<form @submit="onSubmit">

    <input name="username" />

    <button form-type="submit">提交</button>

    <button form-type="reset">重置</button>

</form>

<script>

methods: {

    onSubmit(e) {

        // e.detail.value 包含所有带 name 的组件数据

        console.log(e.detail.value);

    }

}

</script>

---

七、组件通信

1. 父组件 → 子组件（props）

Vue

<!-- 父组件 -->

<Child title="标题" :count="100" />

<!-- 子组件 Child.vue -->

<script>

props: {

    title: { type: String, default: "默认" },

    count: { type: Number, default: 0 }

}

</script>

2. 子组件 → 父组件（$emit）

Vue

<!-- 子组件 -->

<button @click="sendToParent">发送</button>

<script>

methods: {

    sendToParent() {

        this.$emit("myevent", 数据);  // 发送事件和数据

    }

}

</vue>

<!-- 父组件 -->

<Child @myevent="handleEvent" />

<script>

methods: {

    handleEvent(data) {

        console.log(data);  // 接收子组件的数据

    }

}

</script>

---

八、计算属性（computed）

Vue

<view>{{changeTitle}}</view>  <!-- 显示计算后的值 -->

<script>

data() {

    return { title: "hello" };

},

computed: {

    // 有缓存，依赖值不变不会重新计算

    changeTitle() {

        return this.title.toLocaleUpperCase();  // 

        "HELLO"

    }

}

</script>

computed vs methods

特点	computed	methods
缓存	✅ 有缓存	❌ 无缓存
使用	当属性用	当方法用
触发	依赖值变化	调用时执行

---

九、组件封装

Vue

<!-- components/子组件名/子组件名.vue -->

<template>

    <view>{{title}}</view>

</template>

<script>

export default {

    name: "子组件名",

    props: { title: String }

}

</script>

使用组件

Vue

<template>

    <!-- 1. 导入 -->

    <!-- 2. 注册 -->

    <!-- 3. 使用 -->

    <ChildComponent :title="msg" />

</template>

<script>

import ChildComponent from "@/components/child/child.vue"

export default {

    components: { ChildComponent },

    data() {

        return { msg: "标题" };

    }

}

</script>

---

十、样式（SCSS）

SCSS

.container {

    color: #333;

    

    // 嵌套写法

    .title {

        font-size: 32rpx;

        

        // & 代表父级

        &.active {

            color: red;

        }

    }

}

---

十一、页面跳转

Vue

<navigator url="/pages/index/index" open-type="reLaunch">

    跳转首页

</navigator>

open-type	说明
navigate	默认跳转（可返回）
reLaunch	关闭所有页面，跳转到指定页
redirect	关闭当前页，跳转到指定页

十二、总结这些核心知识点

 1、表单提交（form + @submit）

表单提交需要满足三个条件：

1. 提交按钮要设置 form-type="submit"
2. 接收数据的 input 和 textarea 要设置 name 属性
3. form 表单要绑定 @submit="事件名"
点击提交按钮后，Vue 会自动收集所有带 name 属性的组件数据，通过事件对象的 detail.value 属性返回，格式是一个对象。

2、Picker 选择器

Picker 选择器有几个关键属性：

- :range 绑定可选的数组
- :value 绑定当前选中的索引（初始化用）
- @change 选中项变化时触发，事件对象的 detail.value 就是新索引
- name 用于表单提交时获取数据
重要 ：picker 提交的数据是索引（0、1、2），不是显示的值。如果要获取实际值，需要用索引去数组里查找，比如 values.school = this.option[values.school] 。

3、计算属性（computed）

计算属性和 methods 平级，有缓存机制。当依赖的值不变时，不会重新计算，直接返回上次的结果。使用时像访问普通属性一样，不需要加括号。

相比之下，methods 里的方法每次调用都会重新执行，没有缓存。

 4、父子组件通信

父传子

父组件通过属性向子组件传值：

- 不加冒号：直接传递字符串
- 加冒号：传递变量的值
子组件通过 props 接收数据，可以指定类型和默认值。

 子传父（简化三步走）

1. 子组件喊话： this.$emit("事件名")
2. 父组件监听： @事件名="处理方法"
3. 父组件处理：在 methods 里定义处理方法