Vue3中的组合式API怎么写

本文适用于写过Vue2的人，也是给自己做一个速查备份。

命令行创建项目

要求Node.js版本16.0及以上。

执行命令：

npm init vue@latest

详细文档

定义数据

<template>
	<div>
		{{state.myValue}}
	</div>
</template>


<script setup>
import { reactive } from 'vue'

const state = reactive({
	myValue: '响应数据'	
})
</script>

数据传递 父向子传（props）

即Vue2中的父组件如何向子组件中传值。

废话少说，看代码：

// 子组件Child.vue中
const props = defineProps({  
  myValue: {  
    type: Boolean,  
    default: false,  
  } 
})

调用处：

import Child from './Child'

<child :my-value="true">

注意:

1. 这里的defineProps可以直接使用，而不需额外导入。
2. props里面定义的是驼峰格式，但是父组件使用的时候要写成下划线格式。

事件抛出

通过事件抛出，可以将在子组件中将数据或动作等传递给父组件。

看代码：

// 子组件Child中定义事件和抛出事件
const emit = defineEmits([  
  'evetName' // 选择id修改  
])

const myMethod => () => {
	emit('evetName', '事件参数')
}

父组件中使用事件

import Child from './Child'

<child @eventName="true">

注意：

1. 事件使用的时候可以直接使用驼峰格式

父组件中调用子组件的方法

子组件中需要抛出方法：

<!-- child.vue -->

<script setup lang='ts'>

const childMehod = (value) => {
	console.log('my method')
}

defineExpose({  
  childMehod 
})
</script>

父组件中调用方法的两种写法：

<!-- parent.vue -->
<template>
	<child ref="childRef"></child>
</template>

<script setup lang='ts'>

import { ref, getCurrentInstance } from 'vue'

// 方式1
const { proxy } = getCurrentInstance()
// 方式2
const childRef = ref()

// 调用方法
const parentMethod = (v) => {
	// 方式1的调用方法
	proxy.$refs['childRef'].childMethod(v);
	// 方式2的调用方法
	child.value.childMethod(v);
}
</script>

使用provide和inject跨层级数据传递

在上层组件中提供数据：

<script setup>
import { provide } from 'vue'

provide('mykey', '我是上层组件的值!')
</script>

在子组件或者孙子组件等下层组件中使用该值：

<script setup>
import { inject } from 'vue'

const value = inject('mykey')
</script>

如何使用nextTick

<script setup>
import { nextTick } from 'vue'

async function myMethod() {
  // 此处做了数据更新
  console.log('DOM未更新')
  await nextTick()
  console.log('DOM 此时已经更新')
}
</script>