03-vue组件传值

基于现在都是模块化开发，vue开发过程中组件之间传值是必不可少的，常用的vue的组件传值分为三种方式：父传子、子传父、非父子组件传值。

一、父组件给子组件传值----通过属性

1.子组件需要做的事：

(1)创建一个子组件
(2)写好子组件中自己的逻辑
(3)通过 props:[父组件传值的key] 来接收父组件传递的值
props可接收对象（属性为传递的值，属性值为规定传递值的数据类型）、数组格式的值

2.父组件需要做的事：

(1)导入子组件

import subimagesilder from '../subcomponent/subimagesilder.vue';

(2)注册子组件

  components:{
     subimagesilder 
  }

(3)在<template></template>中使用子组件

<subimagesilder :imageList="imageList"></subimagesilder>

注意：imageList是父组件给子组件传递的值
形式：<子组件对象 :父组件传值的key=值></子组件对象>

二、子组件给父组件传值----通过触发自定义事件

1.子组件需要做的事:

(1)写好子组件自己的代码
(2)在需要传值给父组件数据的地方定义并调用key事件

this.$emit(key,值)

key表示自定义事件名，值表示要传递的值
这里表示会触发key事件
注意,这个key等下在父组件中要使用到

2.父组件需要做的事:

(1)导入子组件
(2)在components中注册子组件
(3)在<template></template>中使用子组件
(4)在子组件的标签中,注册（绑定）key事件发生时执行的函数名称，例如:

 <subnumber v-on:key='函数名称'></subnumber>

(5)在父组件的methods中,写好接收子组件传过来的值的函数即可，例如:

    methods:{
        函数名称(子组件传递过来的值){
            xxxxxx
        }
    }

子组件负责触发key事件，父组件负责注册key事件

三、非父子组件之间传递值----通过Bus/总线/发布订阅模式/观察者模式(4种叫法)

1.创建一个公共的vue实例

• 方式1：创建一个公共的vue实例（在js中），并且导出，在传值和接收值的两方都引入这个js
• 方式2：Vue.prototype.bus = new Vue();
  表示先在Vue的原型上添加bus属性，值为Vue的一个实例x。之后创建的Vue实例中都带有bus属性，并且bus属性值都指向Vue实例x

2.在传值的组件中,调用公共的vue实例。

通过 vue实例.$emit() 传值。传值方触发自定义事件

3.在接收的组件中,调用公共的Vue实例。

通过 Vue实例.$on() 接收。接收方注册自定义事件

注意：触发和监听两个操作必须在公共的vue实例中进行传值和接收值