父组件调用子组件

　　1.在子组件的ts中声明一个变量

　　　　public  lineout:any="你好，我是被父组件调用的子组件"; 

　　2.在父组件的html中写入 （引入子组件）　　　

　　　　<button (click)="parentsClick()">父组件点击调用子组件</button>
　　　　<app-news  #news></app-news>
 
　　3.在父组件的ts中引入viewChild
　　　　import { Component, OnInit ,ViewChild} from '@angular/core';
 
　　4.在export class HomeComponent implements OnInit{}中声明一个变量进行接收
　　　　@ViewChild("news",{static:false}) news:any;
 
　　5.在父组件中完成需要调用的事件

　　　　parentsClick(){
    　　　　console.log(this.news.lineout);
  　　　}
 
注释：

  • 在2中的引入引入子组件的时候给子组件一个标记#news，这个标记在父组件中进行变量接收的时候需要用的，如果接收变量有误，不一致，就会出现问题
  • 如果不在父组件中不写一个接收变量的函数体，而是随意写在某个地方，就会报错
  • 在4中如果不给{static：false},在代码中显示中会报错，但是在你打包的时候会报错，同时你使用vsCode的时候，运行代码的时候也会出现报错
 
 
 

父组件调用子组件 viewChild的更多相关文章

  1. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  2. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  3. vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  4. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  5. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  6. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  7. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  8. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  9. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

随机推荐

  1. WEBAPI获取数据

    在大学学期期间学习的从mvc中的webapi中取数据 直接看代码 首先是控制器中的 using System; using System.Collections.Generic; using Syst ...

  2. 用maven对ssm进行整合

    网上有很多ssm整合的教程,这里给像我这样的初学的新手提供一个整合方法,同时也记录一下自己的学习进度. 同时推荐观看相关视频  https://www.bilibili.com/video/av536 ...

  3. deepin添加设置快捷键

    deepin的设置侧边栏没有快捷键需要手动设置,第一步就是要知道设置的命令是什么. 按下start,把其中的"控制中心"发送到桌面,以文本方式打开之,其中的exec字段就是打开设置 ...

  4. curl tftp libcurl 功能使用

    #include <curl/curl.h> static size_t read_callback(void *ptr, size_t size, size_t nmemb, void ...

  5. Unity中AndroidManifest增加权限，打开应用时不弹出权限申请

    一 屏蔽第一次打开apk时权限弹窗: 在Activity下添加<meta-data android:name="unityplayer.SkipPermissionsDialog&qu ...

  6. js中console在一行内打印字符串和对象

    在前端开发中,大多数的调试一般都是F12中的console和network中查看请求数据和响应数据,也有一部分人喜欢用debugger. 在开发大一些的项目时,在开发环境下,打开着控制台,切换一下页面 ...

  7. Visual Studio 2019尝鲜----新建空项目体验

    等待一个中午的时间终于下载安装完成,vs版本Enterprise 2019  16.0.4 官方可直接下载安装引导程序:  https://visualstudio.microsoft.com/zh- ...

  8. 【原创】CentOS 7 安装redis 5

    1.下载redis安装包 cd /softwares/ wget http://download.redis.io/releases/redis-5.0.5.tar.gz 2.解压redis-5.0. ...

  9. JPA-save()方法会将字段更新为null的解决方法

    今天在开发上碰到一个问题,在做页面展示的时候传给前端十个字段,前端修改了其中3个的值,所以只传了3个值给后端,其余字段默认为null,更新后其他7个字段在全部变为了空值. 在前端没法全量回传所有属性的 ...

  10. mysql基础sql进阶

    回顾前面的基础命令语句 修改数据表 添加字段: alter table 表名 add 字段名 列类型[not null|null][primary key][unique][auto_incremen ...