props是子组件与父组件进行通信的常用方式,使用步骤主要有以下几个:
1. 在子组件中定义props要从父组件接收的变量(变量的类型必须写明,默认值可选)
// 这里以 document.vue 子组件为例
// 通过 defineProps 宏的方式声明, props 接受父组件传递过来的数据
const props = defineProps({title: {type: String,default: 'Default title'}
})
2. 父组件引入子组件,并绑定父组件的变量传递给子组件。
// 这里 App.vue 为父组件
import document from './components/document.vue'
const title = ref("标题")// ......
<document :title="title"></document>
3. 在子组件中分别打印props和使用props中的数据。
console.log("props: ", props);// ......
// 在template 模板中不需要通过props.title方式获取
<template>
<div> {{ title }} </div>
</template>
子组件欲更改父组件数据时,首先必须明确一个原则:谁的数据谁来维护,不能直接通过props来修改(虽说可以改变,但不允许,破坏了数据单向流)。官方给我们提供了emits去处理子组件向父组件数据通信的问题,分为以下几个步骤:
1. 在子组件中定义emits要向父组件触发的事件(事件可以有多个)。
// 通过 defineEmits 宏的方式声明
const emit = defineEmits(['update:title'])
2. 子组件手动触发事件,并传入更新的数据。
// document.vue
<button @click="changeTitle()">click</button>// ......
const changeTitle = (newTitle = “新标题”) => {emit('update:title', newTitle)
}
3. 父组件在子组件标签中绑定同名的事件,并赋值为更新后的数据。
// App.vue
<document :title="title" @update:title="(v) => title = v"></document>
这里的事件名“update:eventName”为固定写法,vue于v2.3引入sync修饰符,省去了在组件标签内写@update函数。
使用sync修饰符:
// App.vue<document :title.sync="title" @change-title="(v) => title = v"></document>
<!-- <document :title.sync="title" @changeTitle="(v) => title = v"></document>-->
<!-- <document :title.sync="title" @ChangeTitle="(v) => title = v"></document>-->// document.vue 添加 changeTitle 事件
const emit = defineEmits(['update:title', 'changeTitle'])
另外这里绑定的changeTitle事件为kebab-case(短横线命名),驼峰和大驼峰命名均可。