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

vue父子组件通信

时间:2023-04-01 02:11:54 vue.js

首先,子组件调用父组件方法。1、使用$emit通过v-on将方法传递给子组件,通过$emit调用子组件。2、父组件将v-bind绑定方法传递给子组件调用3、使用$parent,子组件可以直接访问整个父组件。$root和$parent都可以访问父组件的属性和方法。不同的是,如果有多级子组件,通过parent访问获取父组件,通过root访问获取root父组件(App.vue)。因此,在有组件嵌套的情况下,不要使用$root。二、父组件调用子组件的方法。1、通过在子组件上设置ref,父组件可以直接通过this.$refs访问子组件。2、通过$children,通过索引找到需要的子组件,直接访问子组件。3.通过$ref和$on的组合。步骤:⑴通过在父组件中定义方法。⑵$emit方法触发父组件定义的方法并传递参数。⑶通过$on监听父组件上的方法,$on方法中有一个回调函数可以接受额外的参数($emit方法的参数)。https://blog.csdn.net/qq_2412...https://www.cnblogs.com/yuzho...参考:csdn博客https://blog.csdn.net/alokka/article/details/87104189三,父子组件按加载顺序问题1,同步引入子组件。父组件的beforeCreate、created、beforeMount-->beforeCreate、created、所有子组件的beforeMount-->所有子组件的mounted-->父组件的mounted2,异步引入子组件。父组件的beforeCreate,created,beforeMount,mounted-->子组件的beforeCreate,created,beforeMount,mounted1),不管异步导入还是同步导入。父组件传递props时,是通过接口异步获取的,所以获取数据会拖慢父子渲染速度。会导致子组件html中的模板字符串发生变化,但created中获取的值不会发生变化。(生命周期问题)详见https://www.cnblogs.com/golov...或者https://www.cnblogs.com/taohu...4.路由跳转时页面加载(vue页面切换)Sequence//假设A为当前页面,B为要跳转的页面。B.created()B.beforeMount()A.beforeDestroy()A.destroyed()B.mounted()