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">

注意:

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

事件抛出

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

看代码：

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

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

父组件中使用事件

import Child from './Child'

<child @eventName="true">

注意：

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

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

子组件中需要抛出方法：

<!-- 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>

关于组合式API

这里想说一句，Vue3也支持选项式API，换句话说，Vue2的代码一般情况下是可以在Vue3中正常运行的。

vue3具名插槽的使用方式

在vue2中可以按照如下方式使用

<child>
	<template slot="header"></template>
</child>

而在vue3中需要按照如下方式使用

<child>
	<template #header></template>
</child>

或者

<child>
	<template v-slot:header></template>
</child>

全局变量的实现方式

在vue2中，可以通过如下方式定义：

Vue.prototype.$method = method

<!-- 使用 -->
this.$method...

在vue3中，按照如下方式：

import { createApp } from 'vue'  
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$method = method

一个常用组件 el-date-picker中日期格式的转变

基于vue2的element组件中的el-date-picker，value-formate表示取值的格式，默认的日期类型可以书写成：yyyy-MM-dd

而基于vue3的element-plus，默认日期类型为：YYYY-MM-DD，所有格式可以从Day.js查看。