@ViewChild()使用（调用子组件方法，实用）

柔情只为你懂 2023-06-25 03:10 22阅读 0赞

原文出处：[https://blog.csdn.net/weixin\_41952198/article/details/82864890][https_blog.csdn.net_weixin_41952198_article_details_82864890]

1、子组件加入个方法

methods(val){    
        console.log('值为'+val)  
    }

2、为父组件中的子组件加入变量

<app-viewc #View1></app-viewc>
    <app-viewc #View2></app-viewc>

3、父组件控制台

//引入
    import { Component, OnInit ,ViewChild} from '@angular/core';
    import {ViewcComponent} from '../viewc/viewc.component';
    
    export class ViewFComponent implements OnInit {  
        @ViewChild('View1')  view1:ViewcComponent  
        @ViewChild('View2')  view2:ViewcComponent  
    
        constructor() { }  
    
        ngOnInit() {    
            this.view1.methods('第一个值')；    
            this.view2.methods('第二个值'); 
        }
    }

变量类型为子组件类，可以使用子组件的方法等，同时触发钩子  
ngAfterViewInit，ngAfterViewChecked  
————————————————  
版权声明：本文为CSDN博主「llaaakk」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/weixin\_41952198/article/details/82864890

[https_blog.csdn.net_weixin_41952198_article_details_82864890]: https://blog.csdn.net/weixin_41952198/article/details/82864890

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件调用子组件方法

组件 <template> <div> child </div> </template> <...

待我称王封你为后i/ 2024年04月17日 19:58/ 0 赞/ 103 阅读

相关 Angular中父组件通过ViewChild调用子组件的方法

场景 Angualr中通过原生js和ViewChild的方式获取dom: [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/ar

我就是我/ 2023年10月07日 14:03/ 0 赞/ 50 阅读

相关 @ViewChild()使用（调用子组件方法，实用）

原文出处：[https://blog.csdn.net/weixin\_41952198/article/details/82864890][https_blog.csdn.n

柔情只为你懂/ 2023年06月25日 03:10/ 0 赞/ 23 阅读

相关 vue父组件调用子组件方法

[https://www.cnblogs.com/mophy/p/8590291.html][https_www.cnblogs.com_mophy_p_8590291.htm

约定不等于承诺〃/ 2023年06月23日 12:56/ 0 赞/ 19 阅读

相关 vue 中父子组件传值，以及子组件调用父组件方法，父组件调用子组件方法

先创建子组件创建一个分页的子组件 <template> <div> <el-pagination bac

喜欢ヅ旅行/ 2022年12月16日 09:07/ 0 赞/ 228 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 331 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 289 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 319 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 607 阅读

相关 vue子组件调用父组件方法

说明：有一个组件InputListSelect.vue，选中一个行数据，将该数据传送到父级ProjectEdit.vue文件中 1、父级ProjectEdit.vue调用

桃扇骨/ 2022年02月18日 14:21/ 0 赞/ 407 阅读