vue 父组件调用子组件的函数,vue子组件使用父组件方法

　　主要介绍了vue父组件调用子组件的方法，通过示例代码介绍的非常详细，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

　　组件是Vue最强大的功能之一，js组件可以扩展HTML元素，封装可重用代码。从高层次来说，一个组件就是一个自定义元素，Vue.js的编译器给它添加了特殊的功能。在某些情况下，组件也可以表示为用is特性扩展的原生HTML元素。

　　的所有Vue组件同时都是Vue的实例，因此它们可以接受相同的选项对象(除了一些根级别的特定选项)并提供相同的生命周期挂钩。

　　我们都知道可以通过$ref获得一个DOM，但是它也可以用来获得子组件的实例和调用子组件的方法。

　　示例：

　　子组件：

　　模板

　　分区/分区

　　/模板

　　脚本

　　导出默认值{

　　方法：{

　　子方法(标志){

　　console.log(标志)

　　}

　　},

　　已创建(){

　　}

　　}

　　/脚本

　　父组件：可以被这个调用。$refs.ref.method，方法是将ref添加到子组件。

　　模板

　　div @click=parentMethod

　　children ref= child 1 /儿童

　　/div

　　/模板

　　脚本

　　从“components/children/children . vue”导入子项

　　导出默认值{

　　data(){

　　返回{

　　标志：正确

　　}

　　},

　　组件：{

　　儿童:儿童

　　},

　　方法：{

　　parentMethod() {

　　Console.log(这个。$ refs . child 1)//返回一个vue对象，所以可以直接调用它的方法。

　　这个。$ refs . child 1 . child method(this . flag)；

　　}

　　}

　　}

　　/脚本

　　示例，在同级组件和调用函数之间传递DOM数据

　　编写一个案例，其中数据在同级组件之间传递，父组件调用方法：

　　第一子组件cartcont传输数据

　　这个。$emit(cartadd ，event . target)；

　　父组件接收数据，并通过调用另一个子组件的方法将数据传递给另一个子组件购物车。

　　v-cart cont:food= food @ cartadd= _ drop /v-cart cont

　　虚拟购物车引用=购物车/虚拟购物车

　　_drop(目标){

　　Console.log(父组件接收数据)

　　这个。$ refs . shop cart . drop(target)；

　　}

　　购物车子组件的方法

　　下降(el){

　　Console.log(调用另一个子组件的方法)

　　console.log(el)

　　}

　　关于vue父组件调用子组件的方法的这篇文章到此为止。关于通过vue父组件调用子组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。