组件之间的那些事

一、如何引入组件

1.1、在需要引入组件中文件中导入组件的路径

1.2、引入之后注册组件

组件中的名字形式可以为：changpic(给的组件名称):changpic(组件)

1.3、注册之后可直接在模板中使用

二、父组件的数据如何传给子组件中

2.1、采用props属性传给子组件中

2.1.1、传单个数据

在父组件中，写子组件标签时，可以绑定一个属性传给子组件。

例如：

父组件（index.vue文件）

父组件中script：

data(){

return{

seen:false

}

}

子组件中则可以在script中用props属性接受数据，与data同等级。

props:['istransform']

则可以在模板中使用

2.1.2、传多个数据

步骤：

1）先在data中定义一个数组接收数据，arr:[ ]

2）写一个计算该属性的方法，用Vue的全局方法set来实时更新数据的变化， 并且返回该值,

set方法的三个参数分别代表：（需要设置的数据，需修改数据的下标，设置新的数据）

3）后面步骤和传单个数据相同，只是传的是该计算属性的方法

当然还有一种比较麻烦的方法就是跟传单个数据一样，一个一个的传

代码如下：

父组件中

子组件中：

三、子组件的数据如何传给父组件中

3.1、原理：event（事件）和$emit传送

3.2.步骤：

1）在子组件中设置一个事件，该事件的方法利用$emit返回需要传送的数据

2）父组件中以子组件传过来的$emit名称设置一个事件，从而获得数据

3.3、代码如下

子组件中：

父组件中

四、当子组件向父组件中不传送数据，而只是子组件发生某个事件，而需要改变父组件的效果，也可以用上述的方法，但不用传值，父组件中可以用事件的方法改变某个属性，从而达到效果。一般用于弹窗

比如子组件中点击div时，改变父组件中isTrue的值，父组件中的方法showMessage，可以改为：showMessage(){ this.isTrue = false}

五、非父子组件通信

有时候两个组件之间需要进行通信，但是它们彼此不是父子组件的关系。在一些简单场景，你可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus)：

var bus = new Vue()

// 在组件 A 的 boforeDestroy钩子函数中触发事件

bus.$emit( 'id-selected' , 1 )

// 在组件 B 的 mounted 钩子函数中监听事件

bus.$on( 'id-selected' , function (id) {

// ...

})

//在组件B的beforeDestroy钩子函数中解除绑定

bus.$off(" id-selected ")

创建bus中转站的方法：

一、直接建立bus.js：

二、在main.js中，写入

data:{

bus:new Vue() //空的实例放到根组件下，所有的子组件都可以调用，子组件就不用引用

}

在组件A中引入bus，并触发bus

import bus from ",/bus.js"

beforeDestroy(){

bus.$emit( 'id-selected' , 1 )

}

在组件B中引入bus，并接收bus

import bus from ",/bus.js"

mounted(){

bus.$on( 'id-selected' , function (id) {

consle.log(id)

})

},

beforeDestroy(){

bus.$off( ( 'id-selected'） //不解除绑定则下次触发依次增多

}

链接： http://www.jianshu.com/p/fde85549e3b0