当前位置: 首页 > Web前端 > vue.js

三分钟让你看懂vue中的父子通信

时间:2023-04-01 01:47:55 vue.js

vue组件开发。什么是组件开发。组件、封装标签、样式和JS代码时可复用的Vue实例Vue组件分类:页面组件页面下的功能组件组件开发:一个页面(.vue)可能有一个或多个组件(.vue)组成一个完整的页面功能封装思想,将页面中可复用的部分封装成一个组件,方便项目开发和维护一个页面,可以拆分成组件。每个组件都是一个独立的整体,可以有自己的结构。风格和行为。vue组件的封装和使用。为什么要封装组件复用。一次封装可以多次使用,方便维护和代码组织。使用步骤。首先定义一个组件,创建一个名为MyCom的组件,在App.vue中使用2.在App.vue中注册组件,并使用组件。注意:组件名称不能与已有的html标签名称一致。vue中有多个组件样式名称相同,导致冲突。因为vue中默认的组件样式中定义的样式是全局的,存在重名覆盖的情况下,无法产生效果,产生冲突。我们如何解决这个冲突?部分样式:将scoped属性添加到样式标签中。原理在样式中添加scoped属性,会在这个组件的标签中添加一个随机生成的以data-v开头的属性,并且必须是当前组件的元素或者子元素的根元素才会有这个自定义属性。如果给样式加上scoped,组件中的样式就是要对当前的vue组件生效。相反,风格是全球性的。当然,在父子组件都设置了scoped属性的情况下,如何在父组件中控制子组件中的样式。这时候我们就需要用到vue组件中的deepactionselector。/deep/属性来解决这个Vue组件通信问题。如何在组件之间进行通信?因为每个组件的变量和值都是独立的=>想要获取到其他页面定义的变量怎么办?我们先来看看他们之间的关系图。父组件和子组件之间的通信是在App.vue中导入到MyCom.vue中使用的。这时候,我们称App.vue组件为父组件,MyCom.vue组件为子组件。.那么我们如何导入和使用这个组件呢?我们先创建一个文件夹,在里面创建一个App.vue组件和一个MyCom.vue组件。然后在父组件中,为你需要传入的值自定义一个属性,对于子组件,使用props来接收这个自定义属性。我们可以在子组件中使用父组件中的值。在vue中,我们需要遵守单向数据流的原则。在父传递子的前提下,父组件的数据会通知子组件自动更新。子组件内部不能直接修改父组件传过来的props(props是只读的)。这意味着父组件中的数据传递后,子组件只能使用父组件传递的数据,不能修改父组件中的数据。然后就会报错。我们把这种现象称为Vue中的单项数据流描述:父组件传给子组件的是对象,子组件修改对象的属性不会报错。对象是引用类型,相互更新;但它们不能更改参考地址道具的值不能重新分配。但是引用类型的子组件可以修改父组件。子组件与父组件通信。子组件和父组件之间的通信是什么。指将数据从子组件内部传递给父组件,以供使用或修改父组件的数据关系图。父组件中:Child:this.$emit("Customeventname1",passvalue1)--->执行父方法中的函数代码我们现在在子组件中自定义一个父元素中的事件使用$emit语法来执行父元素中的函数代码。嗯,这就是Vue中组件之间的用法和组件通信。总结:父子通信就是在父元素中设置一个自定义属性。在子组件中使用props来接收。child传parent就是在父组件中自定义一个事件,在子组件中使用$emit语法接收,调用父组件中的事件。源码附件已打包上传至百度云。您可以自行下载。是的~链接:https://pan.baidu.com/s/14G-b...提取码:yu27百度云链接不稳定,随时可能失效,请及时保存。如果百度云链接失效请留言告诉我,我看到后会及时更新~开源地址码云地址:http://github.crmeb.net/u/defuGithub地址:http://github.crmeb。net/u/defu本文转载自:https://juejin.cn/post/710017...