angular4父组件向子组件传值，子组件向父组件传值的方法

kviccn 发布于2019-08-23 14:09 / 1524人阅读

摘要：父组件向子组件传值文件目录父组件父组件我是传往子组件的值子组件使用修饰器去接收接收父组件的值这样就把值从父组件传到了子组件子组件向父组件传值子组件通过方法借助修饰器传值给父组件子组件我是传给父组件的值子组件点击传值给父组件父组件父

 父组件向子组件传值 @Input

文件目录

父组件：

father.template.html

父组件

father.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "cmt-father",
    templateUrl: "./father.template.html"
})
export class FatherComponent implements OnInit {
    data: any = "我是传往子组件的值"
    ngOnInit() {
    }

    ngOnChanges() {
    }

}

子组件：（使用@Input修饰器去接收）

childcomponent.ts

import { Component, OnInit, Input } from "@angular/core";

@Component({
    selector: "cmt-child",
    templateUrl: "./child.template.html"
})
export class ChildComponent implements OnInit {
    @Input() data: any;//接收父组件的值
    ngOnInit() {
        console.log(this.data)
    }

    ngOnChanges() {
        console.log(this.data)
    }

}

这样就把值从父组件传到了子组件！

子组件向父组件传值（子组件通过方法借助修饰器@output传值给父组件）

子组件

childcomponent.ts

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
    selector: "cmt-child",
    templateUrl: "./child.template.html"
})
export class ChildComponent implements OnInit {
    @Output("checked") checkedBack = new EventEmitter();
    id:any ="我是传给父组件的值"
    ngOnInit() {
    }

    ngOnChanges() {
    }
    checkedCallback() {
        this.checkedBack.emit(this.id);
    }
}

child.template.html.html

子组件

父组件

father.template.html

父组件

father.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "cmt-father",
    templateUrl: "./father.template.html"
})
export class FatherComponent implements OnInit {
    ngOnInit() {
    }

    ngOnChanges() {
    }
    
    checkedBack(event) {
        console.log(event)
    }
}

这样子组件通过点击就把值传递给了父组件！

GPU云服务器云服务器子组件组件和组件通信排序组件切换组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100181.html

Vue 组件间传值

摘要：前言作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种组件间传值的几种方法，跟着小编一起来学习一下吧实现注意学习本文，需要您对有一定的了解。为了便于讲解，以下方法均假设父组件是，子组件是，兄弟组件是。前言 Vue 作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种 Vue 组件间传值的几种方法，跟着小编一起来...

VishKozus 2019-08-23 15:07 评论0 收藏0
一个故事讲懂vue父子组件传值

摘要：老王用笔在纸上写了好多内容，把纸纸相当于，也就是数据放进了信封信封相当于属性，也就是里，然后给了邮局相当于相当于一个中介，快递员进行派送，小明来到邮箱相当于，看到里边有封信相当于父组件的值，拿了出来。讲故事前先讲代码父组件向子组件传值父组件数据传递给子组件可以通过props属性来实现父组件： import childComponent from ...

xi4oh4o 2019-08-23 18:19 评论0 收藏0
vue父组件和子组件数据传递

1、父组件向子组件传递数据父组件：父组件：{{ msg }} import Child from ./Child export default { name: Parent, data () { return { msg: Hello world } } } 子组件： ...

forrest23 2019-08-23 16:55 评论0 收藏0
vue子组件向父组件传值。

摘要：子，父组件相互传值。就這样取到了子组件的值。其他情况也类似的处理。 1、子，父组件相互传值。话不多说直接上代码：父组件向子组件传值就是通过子组件定义的props子组件： @import ../../../assets/css/jedate.css; import ../../../assets/js/jquery.jedate.min e...

klivitamJ 2019-08-21 11:43 评论0 收藏0
父子组件传值及v-model实现通信

摘要：子组件也属于当前实例。监听钩子函数的场景使用的不多，但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。一. 父组件向子组件传值创建parent和child组件，并在parent中注册child组件在父组件调用子组件标签中添加一个自定义属性(msg)， im...

lwx12525 2019-08-23 17:51 评论0 收藏0