魔方 网站建设 有限公司,苏州做网版的公司,石家庄飞数科技,欧洲购物网站排名props是子组件与父组件进行通信的常用方式#xff0c;使用步骤主要有以下几个#xff1a; 1. 在子组件中定义props要从父组件接收的变量#xff08;变量的类型必须写明#xff0c;默认值可选#xff09;
// 这里以 document.vue 子组件为例
// 通过 defineProps 宏的方…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 :titletitle/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 clickchangeTitle()click/button// ......
const changeTitle (newTitle “新标题”) {emit(update:title, newTitle)
}
3. 父组件在子组件标签中绑定同名的事件并赋值为更新后的数据。
// App.vue
document :titletitle update:title(v) title v/document 这里的事件名“update:eventName”为固定写法vue于v2.3引入sync修饰符省去了在组件标签内写update函数。 使用sync修饰符
// App.vuedocument :title.synctitle change-title(v) title v/document
!-- document :title.synctitle changeTitle(v) title v/document--
!-- document :title.synctitle ChangeTitle(v) title v/document--// document.vue 添加 changeTitle 事件
const emit defineEmits([update:title, changeTitle]) 另外这里绑定的changeTitle事件为kebab-case短横线命名驼峰和大驼峰命名均可。
