怎么搜索到自己网站,长沙编程培训学校哪家好,个人网站备案地址,客户案例 网站设计文章目录 一、Props二、v-model三、Provide/Inject#xff1a;四、事件四、Ref 在 Vue 3 中#xff0c;父子组件之间进行通信有多种方式#xff0c;下面简单介绍下常见的方式及其用法和使用场景#xff1a; 一、Props
用于父组件向子组件传递数据。 这是最基本也是最常用的… 文章目录 一、Props二、v-model三、Provide/Inject四、事件四、Ref 在 Vue 3 中父子组件之间进行通信有多种方式下面简单介绍下常见的方式及其用法和使用场景 一、Props
用于父组件向子组件传递数据。 这是最基本也是最常用的一种方式。通过在子组件上定义 props父组件可以将数据传递给子组件。在子组件中通过 props 对象访问这些属性。 父组件
templateChildComponent :messageparentMessage /
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent,},data() {return {parentMessage: Hello from parent!,};},
};
/script
子组件
templatediv{{ message }}/div
/templatescript
export default {props: {message: String,},
};
/script
二、v-model
用于在父子组件之间实现双向绑定。在 Vue 3 中通过 v-model 方式进行组件通信需要使用 v-model 指令和 emit 事件。父组件使用 v-model 向子组件传递数据并通过子组件触发 用update:modelValue 事件来实现双向绑定。 下面是一个简单的例子 子组件
!-- ChildComponent.vue --
templateinput :valuemessage input$emit(update:modelValue, $event) /
/template
script
export default {props: {modelValue: String,},computed: {message: {get() {return this.modelValue;},set(value) {this.$emit(update:modelValue, value);},},},
};
/script父组件
!-- ParentComponent.vue --
templateChildComponent v-modelparentMessage /
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent,},data() {return {parentMessage: Hello from parent!,};},
};
/script在子组件 ChildComponent 中通过 :value“modelValue” 将 modelValue 绑定到 input 元素上然后通过 input“$emit(‘update:modelValue’, $event)” 触发 update:modelValue 事件从而实现了父子组件之间的双向绑定。
在父组件 ParentComponent 中使用 v-model 将 ChildComponent 的 modelValue 绑定到 message 上这样在父组件中修改 message 的值会自动同步到 ChildComponent 中反之亦然。
需要注意的是v-model 实际上是一个语法糖它会自动处理 value 和 input 事件。如果在子组件中使用 v-model则子组件应该接受名为 modelValue 的 prop并发出一个名为 update:modelValue 的事件。这样可以确保 v-model 在父子组件之间正确地进行双向绑定。
三、Provide/Inject
用于祖先组件向后代组件传递数据通过 Provide 提供数据通过 Inject 注入数据。祖先组件通过 provide 提供数据后代组件通过 inject 接收数据。 祖先组件
templateGrandparentComponenttemplate v-slot{ message }ChildComponent :messagemessage //template/GrandparentComponent
/template
script
import GrandparentComponent from ./GrandparentComponent.vue;export default {components: {GrandparentComponent,},provide() {return {message: Hello from grandparent!,};},
};
/script父组件
templateslot :messagemessage /
/templatescript
export default {inject: [message],
};
/script子组件
templatediv{{ message }}/div
/templatescript
export default {props: {message: String,},
};
/script四、事件
通过自定义事件子组件向父组件传递数据。子组件通过 $emit 触发自定义事件父组件监听该事件接收数据。 子组件
templatebutton clicksendMessageSend Message/button
/templatescript
export default {methods: {sendMessage() {this.$emit(message, Hello from child!);},},
};
/script父组件
templateChildComponent messagehandleMessage /
/template
script
import ChildComponent from ./ChildComponent.vue;
export default {components: {ChildComponent,},methods: {handleMessage(message) {console.log(message);},},
};
/script四、Ref
使用 ref 可以将数据在父子组件之间共享。 父组件
templateChildComponent :messagesharedMessage /
/template
script
import { ref } from vue;
import ChildComponent from ./ChildComponent.vue;
export default {components: {ChildComponent,},setup() {const sharedMessage ref(Hello from parent!);return { sharedMessage };},
};
/script子组件
templatediv{{ message }}/div
/template
script
import { ref, watchEffect } from vue;export default {props: {message: String,},setup(props) {const message ref(props.message);watchEffect(() {// 监听 props 中的 message 变化message.value props.message;});return { message };},
};
/script
