图片 20

angular2 组件之间传值及事件传递

定义组件名的方式有两种:

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时,
你也必须在引用这个自定义元素时使用 kebab-case,
例如

<my-component-name>

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时,
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
简介

angular2及以后的版本(包括angular4)都称为angular2+。组件之间的传值主要分为父子组件间传值和兄弟组件传值两大类,其中父子组件传值又分为父组件向子组件传值和子组件向父组件传值两种。

传值&传引用:

传值:String Number Boolean

传引用:Array Object 

(如果传的是引用,改变一个地方的数据,所有跟引用相关的数据都会发生变化。如果传的是值,则不会。)
一、父组件向子组件传值

父组件向子组件传值:

    在组件上绑定属性:v-bind:property="value" ,
    其中property为绑定的属性名,value为需要传的值(父组件数据中的属性名)
    在子组件里用props:["property"] 接收父组件传的值,其中property为组件上绑定的属性名

示例:

父组件:

data(){
    return {
        test: [{
            name:  "Amor",
            sex: "man",
            age: 18
        }]
    };
}

组件(组件名为child):

<child v-bind:users="test"></child>


子组件接收值:

props:["users"]

或

props: {
    users: {
        type: Array,
        required:true
    }
}
1.1 示例一

父组件中把roleName传给子组件使用

图片 1

parent.ts

图片 2

parent.html

图片 3

child.ts

图片 4

child.html

以上四步即完成了一个父组件向子组件传值的操作。

子组件向父组件传值:

子组件注册事件:

this.$emit(事件名, value);

父组件监听事件:
  组件上:
    v-on:事件名="自定义方法名($event)",
    其中$event接收子组件传过来的值,此参数必须为$event

示例:

①脚手架

子组件:

methods: {
    send(){
        this.$emit(change, "我是传递的值!");
    }
}

组件(组件名为child):

<child v-on:change="receive($event)"></child>

父组件:

methods:{
  receive(data){
    console.log(data); // "我是传递的值!"
  }
}
1.2 示例二:拦截输入属性

子组件可以拦截输入属性的数据并进行相应的处理,即使用setter拦截输入属性或ngOnChanges监听数据变化,这里仅示例setter的方式

图片 5

child.ts

组件注册&引用:

全局注册:

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册:

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

①脚手架:

import 自定义组件名1 from '组件1路径';
import 自定义组件名2 from '组件2路径';

父组件:

components: {
  自定义组件名1,
  自定义组件名2
}

脚本:

# 注意:
    data
    类型:Object | Function
    限制:组件的定义只接受 function

实例:

# test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="test.js"></script>
</head>
<body>
    <div id="test">
        <test v-bind:title="title" v-on:from_child="getValue($event)"></test>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data(){
            return {
                title: "This is Vue.js!"
            };
        },
        methods:{
            getValue:(data)=>{
                console.log(data);
            }
        }
    });
</script>

#test.js

Vue.component("test",{
    template: ` <div>
                    <p>Hello,world!</p><p>{{test}}</p>
                    <p>{{title}}</p>
                    <button @click="to_parent()">子向父传值</button>
                </div>`,
    props:["title"],
    data(){
        return {
            test: "Vue.js!"
          };
    },
    methods: {
        to_parent:function () {
            this.$emit('from_child',this.test);
        }
    }
});

 

1.3 父组件通过局部变量获取子组件引用

在父组件的模板中为子组件创建一个局部变量,这个父组件可以通过这个局部变量来获得读取子组件公共成员变量和函数的权限;模板局部变量的作用域范围仅存在于定义该模板局部变量的子组件。

图片 6

parent.ts

图片 7

child.ts

1.4 父组件使用@ViewChild获取子组件的引用

由于模板局部变量只能在模板中使用,而不能直接在父组件类中使用,这有一定的局限性,这里介绍一种更优雅的数据传递方式—@ViewChild。
当父组件需要获取子组件中变量或者方法的读取权限时,可以通过@ViewChild注入的方式来实现,组件中ViewChild的作用是声明对子组件元素的实例引用,它提供了一个参数来选择将要引用的组件元素,这个参数可以是一个类的实例,也可以是一个字符串,它们实现的功能一样,只是表现形式不同,具体如下:

  • 参数为类实例,表示父组件将绑定一个指令或者子组件实例。
  • 参数为字符串类型,表示将起到选择器的作用,即相当于在父组件中绑定一个模板局部变量,获取到子组件的一份实例对象的引用。

下面是第一种参数类型(其中ContactCollectComponent是子组件):

图片 8

parent.ts

二、子组件向父组件传值
2.1 示例一

子组件的输出属性onCollect传递给父组件,当父组件监测到子组件的onCollect动作时就会执行父组件中相应的方法,下面案例中同时父组件也把detail传给了子组件

图片 9

child.ts

图片 10

child.html

图片 11

parent.html

图片 12

parent.ts

2.2 示例二

子组件的联系人id传给父组件使用

图片 13

child.html

图片 14

child.ts

图片 15

parent.html

图片 16

parent.ts

父组件绑定的事件通过$event对象来访问num(即payload)的数据。

2.3 在子组件中获取父组件的引用
  • 已知父组件的类型
    这种情况可以直接通过在构造函数中注入ParentComponent来获取已知类型的父组件引用,示例代码如下:

图片 17

child.ts

  • 未知父组件的类型
    一个组件可能是多个组件的子组件,有时候无法直接知道父组件的类型,在Angular中,可通过“类-接口”的方式来查找,即让父组件通过提供一个与“类-接口”标识同名的别名来协助查找。
    首先创建Parent抽象类,它只声明了name属性,没有实现(赋值),示例代码如下:

图片 18

abstract

然后在ParentComponent组件的providers元数据中定义一个别名Provider,用useExisting来注入ParentComponent组件的实例,示例代码如下:

图片 19

parentComponent.ts

通过下面的代码,在子组件中就可以通过Parent这个标识找到父组件的实例来,示例代码如下:

图片 20

child.ts

三、兄弟组件间传值

兄弟组件之间传值可以利用创建公共服务的方式来实现。