父组件子组件之间怎么调用各自的方法 程序员文章站 2022-06-17 17:22:37 父组件代码(index.vue)我们可以这样理解谁是父组件在哪引用谁就是父组件一般index是最大的父组件需求：现在想从dialog中间组件调用aMap里面的方法 //实例组件 父组件代码(index.vue) 我们可以这样理解谁是父组件在哪引用谁就是父组件一般index是最大的父组件需求： 现在想从dialog中间组件调用aMap里面的方法 <template> <div class="map-container"> <div class="map-wrapper"> <Map ref="line" /> //实例组件 </div> <Dialog @wire="wire"/> </div> </template> <script> import Map from './aMap' //引用aMap组件 import Dialog from './dialog'//引用Dialog组件 import $ from 'jquery' export default { components: { //注册组件 'Map': Map, //注册名为Map的组件在上面引用就行了 'Dialog': Dialog }, data () { return {} }, methods: { wire(val) { //这个是中间件自己定义的名字作用是父组件绑定中间组件我们就能在中间组件点击按钮然后$emit抛出去给父组件就能触发wire方法 this.getWire(val) //调用getWire方法 }, getWire(val) { this.$refs.line.drawPolyline(val) //和子组件关联，在子组件写的方法drawPolyline我们就能触发了 } } } </script> <style lang="scss" scoped> //scss是什么呢? 按照官方的话说是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！ .map-wrapper{ width: 100%; height: 100%; position: absolute; } </style> 我们可以看代码，index组件中没有做什么功能，而我们只是引用了其他的组件，我个人觉得这样细分模块后期更好维护ref="line"作用是什么？@wire="wire"作用是什么？ this.$refs.line.drawPolyline(val)作用是什么？ 各位是不是有这几个问题想问？作用是什么？我来解释一下。 ref：被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的$refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例，比如呢，我想关联到子组件，我们可以在实例的组件上加上ref="line"这个对西，我们就能调用实例的组件里面的方法了<Map ref="line" /> @wire="wire"：用来绑定中间组件dialog.vue的这样我就能在中间组件dialog.vue点击按钮就能触发子组件aMap.vue里的方法了 this.$refs.line.drawPolyline(val)：可以让父组件触发子组件里的方法 中间组件代码(dialog.vue) <template> <div> <el-button type="primary" size="mini" @click="foundLine($event)">{{this.btnText}}</el-button> </div> </template> <script> export default { data() { return { btnText: '开始创建' } }, created() { }, mounted() { }, methods: { foundLine(val) { //点击按钮触发foundLine方法 this.$emit('wire', val) 触发当前实例上的wire事件，val是参数 } </script> <style lang="scss" scoped> </style> this.$emit作用？ 子组件可以使用 $emit 触发父组件的自定义事件。点击按钮后触发foundLine方法，方法里面在触发当前实例上的wire事件 子组件代码(aMap.vue) 在index中引用的都是子组件 <template> <div class="aMap"> <el-amap //这个是高德地图组件 vid="amapPro" :amap-manager="amapManager" :map-style="mapStyle" :zoom="zoom" :center="center" :events="events" :resize-enable="resizeEnable" /> </div> </template> <script> export default { data () { return { }, mounted() { }, components:{ }, methods: { drawPolyline(e) { const _this = this const map = this.amapManager.getMap() this.mouseTool = new AMap.MouseTool(map) if (this.falg){ this.mouseTool.polyline({ strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 6, // 线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 }) this.polylineList = [] AMap.event.addListener(this.mouseTool,'draw',function (e) { //添加点击事件,传入对象名，事件名，回调函数 _this.polylineList.push(e.obj) console.log("绘制的线", _this.polylineList) }) console.log(e) this.falg = false } else { this.closeDrawPolygon() this.mouseTool.close() this.opnePolygon() this.falg = true } } } </script> <style lang="scss"> </style> drawPolyline()是我们要触发的方法 总结 (dialog.vue里)第一我们点击按钮后会触发foundLine()方法，然后通过this.$emit(‘wire’, val)调用父组件里面的wire方法 在index.vue 组件中注册dialog、Map组件然后在实例两个组件，在实例组件<dialog@wire=“wire”/>上加上dialog.vue里面的方法里面写的wire因为这样才能和实例组件关联起来，然后在methods写一个wire()方法调用getWire()方法，方法里写了触发子组件的this.$refs.line.drawPolyline(val)事件，通过这些操作就能在中间组件跨父组件触发子组件里的方法了 本文地址：https://blog.csdn.net/m0_46623639/article/details/111936960 相关标签： vue框架 vue 上一篇： 华硕无畏二合一值得入手吗 华硕无畏二合一OLED触屏笔记本评测 下一篇： 用Python实现zip密码破解实例 推荐阅读 父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法 Vue.js子组件向父组件通信的方法实例代码详解 Vue中父组件向子组件通信的方法 vue2.0 子组件改变props值,并向父组件传值的方法 vue 父组件调用子组件方法及事件 Angular父组件调用子组件的方法 React 子组件向父组件传值的方法 Vuejs 2.0 子组件访问/调用父组件的方法(示例代码) 子组件调用父组件的数据及方法 vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法