Vue 组件间函数调用，事件传递 |
您所在的位置：网站首页 › vue父组件调用子组件函数方法 › Vue 组件间函数调用，事件传递 |
|
注明: 采用了一个很 low 的方法 来实现任意组件间的函数调用，也可以说是事件传递。 子组件调用父组件函数在子组件中可以 通过 emit 函数触发父组件中自定义的事件，通过事件绑定调用父组件函数。 父组件调用子组件函数在父组件中， 通过在子组件上绑定一个 ref 值， 然后直接调用子组件的函数 任意组件间函数调用找一个或一些组件，使得俩个组件之间有一些联系，然后使用上面两个方法，不断的将函数传递下去 上代码 子组件通过触发父组件的事件来调用父组件的函数 //父组件的html代码 //父组件的js代码 (单文件组件写法) methods:{ parentFunction: function(){ //codes } } //子组件js代码, methods: { callParents: function(){ this.$emit("myEvent",args); //myEvent是事件名，要与父组件监听（@myEvent）对应， // args 是要传递参数，这就随便了。想传什么传什么 } } 父组件调用子组件函数，可以说是一个 Js语句 直接调用了， //父组件的html代码， //父组件的js代码 (单文件组件写法) methods:{ parentFunction: function(){ this.$refs.child.childFunction(params); //注意两个点对应， 一个是自己定义的 ref 值， 二是子组件的函数名 } } //子组件js代码, methods: { childFunction: function(params){ //codes } } 任意组件间的通信组件A ， 组件 B， 组件C 现在 B 组件要调用 组件 C 中的函数。 假如 组件 A 是 B 和 C 的父组件， 就先用 emit 触发A的事件，在A事件的调用函数中，调用C组件的函数 假如 组件 A 是 B 的子组件 、 C 的父组件 。 就直接调用函数， B 调用 A 的函数 ，在被调用的函数中 ，调用 C 组件的函数 其他情况同理 Ok ，优秀 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |