网站开发语言学习C 吗,企业数字化建设公司,河南省住房与城乡建设部网站,商务 服务类网站模板一、组件直接传值
大家都知道父子组件传值的方案#xff0c;有以下几个#xff0c;不再详细敖述 Props#xff1a;父组件向子组件传递数据 $emit#xff1a;子组件通过自定义事件向父组件传递数据 .sync修饰符#xff1a;一个方便且强大的工具#xff0c;可以简化父子组…一、组件直接传值
大家都知道父子组件传值的方案有以下几个不再详细敖述 Props父组件向子组件传递数据 $emit子组件通过自定义事件向父组件传递数据 .sync修饰符一个方便且强大的工具可以简化父子组件之间的双向数据绑定用于创建双向绑定prop的修饰符它允许子组件更新父组件的prop值实现父子组件之间的双向数据同步如果不想使用事件.sync修饰符的工作原理主要基于Vue.js的事件机制和prop传递机制 Vuex进行状态管理应用提供了一种高效、清晰的状态管理方案。通过集中式存储管理、可预测的状态变化、组件间的解耦以及方便的调试工具等特性Vuex极大地简化了应用程序的状态管理。 provide/inject是Vue.js中一种强大的机制用于实现跨组件的数据共享和方法传递。它们能够有效地避免繁琐的props传递提升组件间通信的灵活性和代码的可维护性。然而在使用时需要注意响应性问题、命名冲突以及性能开销等细节。 Bus事件Bus事件适用于简单的场景或临时解决方案如果在组件销毁后没有移除事件监听器可能会导致内存泄漏。因此在组件销毁之前应该使用$off方法来移除事件监听器。 refs或parent/$children访问组件实例父组件可以通过$refs直接访问子组件的数据或方法父组件可以通过children访问子组件子组件可以通过parent访问父组件从而实现父子组件之间的数据传递。但这种方式会破坏组件的封装性和独立性因此应尽量避免过多使用。 二、 子组件改变父组件的值
子组件通过自定义事件向父组件传递数据来让父组件改变值是正规使用,其中.sync修饰符同步父组件值是综合版本不过有以下两种情况是不被推荐尤其直接改变非对象属性 子组件直接改变了父组件里面的对象因为是对象里面的属性没有直接触发该对象属性的 setter只是在修改对象内部的引用而这个内部引用并没有被 Vue 的响应式系统所追踪。因此从技术上讲Vue 不知道这个内部属性已经被修改也就不会触发视图更新也就不会报错。不会报错直接修改父组件非对象属性就会直接触发 setter引发报错Avoid mutating a prop...报错 父组件
templatedivchild-component :parentMessageparentMessage :formform setParentMessagesetParentMessage :form.syncform/child-component/div
/templatescript
export default {data() {return {parentMessage: Hello from parent!,form:{user:默认}};},methods: {setParentMessage(msg) {this.parentMessage msg//推荐}}
}
/script
子组件
templatedivp clicksendUpdate{{ parentMessage }}/p/div
/templatescript
export default {props: {parentMessage: String,form: Object},methods: {sendUpdate(data) {this.form.us不报错//只是在修改对象内部的引用而这个内部引用并没有被 Vue 的响应式系统所追踪。因此从技术上讲Vue 不知道这个内部属性已经被修改也就不会触发视图更新也就不会报错。this.parentMessage报错//Avoid mutating a prop...//推荐:子组件通过自定义事件向父组件传递数据来让父组件改变值是正规使用this.$emit(setParentMessage, 自定义事件传递数据);//推荐:.sync修饰符同步父组件值const form { ...this.form };form.us .sync修饰符同步父组件值;this.$emit(update:form, form);//当然这样做可能会使代码变得难以理解和维护特别是在大型应用程序中。//更好的做法是遵循Vue的最佳实践即不要直接修改prop。this.form.us .sync修饰符同步父组件值;this.$emit(update:form, this.form);}}
}
/script
