当前位置: 首页 > Web前端 > HTML

vue组件通信(父子之间,非父子之间)

时间:2023-03-28 01:02:04 HTML

vue组件通信(父子之间,非父子之间)1、props/$emits(1)v-model(输入修饰符。lazy,.number,.trim),.sync(parentcomponent:title.sync="myTitle",childcomponentneedsthis.$emit('update:title',this.title+'::afterupdate'))句法sugar,在表单控件或组件上创建“双向绑定”。text和textarea元素使用value属性和input事件;checkbox和radio使用checked属性和change事件;选择字段的值作为道具,并作为事件更改。(2)通过props向下传递,通过event$emit向上传递(3)Props不应该在子组件内部改变,这会打破单向数据绑定,使数据流难以理解。如果有这样的需求,可以通过data属性接收或者使用computed属性转换。其次,如果props传递的是引用类型(对象或数组),如果子组件中更改了对象或数组,父组件的状态也会随之更新。利用这个,可以实现父子组件之间的“双向”数据传输。Binding”,这种实现方式虽然可以节省代码,但是会牺牲数据流的简单性,很难理解,最好不要这样做。如果想实现父子之间数据的“双向绑定”components,可以使用v-model或者.sync2.$children/$parent$parent属性可以用来从子组件访问父组件的实例,$children属性可以直接获取子组件3.ref(1)当父组件需要主动获取子组件中的数据或方法时,可以使用$ref直接访问子组件的实例。(2)$refs被创建作为渲染结果,所以在初始渲染时是不存在的,此时无法访问。(3)$refs是无响应的,只能获取子组件实例在获取的那一刻的状态,所以避免在模板和计算属性中使用它。4.Provide/injectde挂起注入允许我们在任何后代组件中访问父组件提供的数据和方法。5、eventBus可以实现任意两个组件之间的通信。6、Vuex使用集中存储管理应用所有组件的状态,并使用相应的规则保证状态以“可预测”的方式变化,更容易定位问题7.$attrs/$listeners(1)与嵌套较深的组件通信时,使用props和event会很麻烦,中间的组件只是作为一个中转站(2)$attrs会包含父组件中所有prop接收不到的属性(不包括class和style属性),这些属性可以通过v-bind="$attrs"直接传递给内部组件。(3)$listeners会包含所有父组件中的v-on事件监听器(不包括.native装饰器),可以通过v-on="$listeners"传递给内部组件。8.本地存储/sessionStotage9。通过$root访问根实例(1)通过$root,任何组件都可以获得当前组件树的根Vue实例,通过维护根实例上的数据,可以实现组件间的数据共享。(2)修改数据不可预测