vue子组件触发祖先元素的执行的方法

这周刚开始跟研发对接接口，在写交互的过程中遇到各种各样的问题，由于第一次对接这样的项目，最常见问题就是来回传值和触发，今天趁着周末来写个例子记录一下。
component3是component2的自组件，component2是component1的子组件，

component3 如何触发component1执行方法呢？<component1 @clickHandler2=“clickHandler3”>
<component2 />
<compment1>
<script >
export default {
methods: {clickHandler3 () {console.log(args)//args要传的参数}
}
}
</script><component2 @clickHandler1=“clickHandler2”>
<component3 />
<compment2>
<script >
export default {
methods: {clickHandler1 (args) {this.$emit('clickHandler2', args) //args要传的参数}
}
}
</script><component3 @click="clickHandler"/>
<script >
export default {
methods: {clickHandler (args) {this.$emit('clickHandler1', args) //args要传的参数}
}
}
</script>

子组件先触发父组件执行，然后父组件触发父组件的父组件执行

vue子组件触发祖先元素的执行的方法相关推荐

Vue子组件触发父组件事件
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events inter ...
vue子组件获取祖先组件值的方法
使用场景如子组件的子组件想获取祖先组件的至或者方法,用props传递显然是吃力不讨好,难以维护,用vuex的话在比较小的项目中会增加复杂度,所以这里采取另外一种方法 Provide& Inj ...
vue子组件mounted不执行_vue 页面回退mounted函数不执行的解决方案
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
vue子组件mounted不执行_vue中父子组件传值，解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...
Vue子组件的显示与隐藏
文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件 Vue子组件的显示与隐藏在使用Vue开发前端页 ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
vue子组件和父组件之间传值方法
父组件向子组件传值(prop-主要用于传递数据) 父组件向子组件传值分为两步: 1.父组件动态绑定一个需要传递的值 2.子组件在props属性中获取到父组件中传递的值,并使用例子父组件: 在父组件 ...
vue 孙子组件获取祖先组件数据
vue 孙子组件获取祖先组件数据 1.概述在vue项目开发中,如果逻辑比较复杂或者页面的内容较多时,通常会使用组件化开发页面.这个时候一般都是父子组件,两层就够了.使用props和emit方式父子组 ...

vue子组件触发祖先元素的执行的方法

vue子组件触发祖先元素的执行的方法相关推荐

最新文章

热门文章