一、如何引入组件
1.1、在需要引入组件中文件中导入组件的路径
1.2、引入之后注册组件
组件中的名字形式可以为：changpic(给的组件名称):changpic(组件)
1.3、注册之后可直接在模板中使用
<template>
<changpic></changpic>
</template>
二、父组件的数据如何传给子组件中
2.1、采用props属性传给子组件中
2.1.1、传单个数据
在父组件中，写子组件标签时，可以绑定一个属性传给子组件。
例如：
父组件（index.vue文件）
<template>
<changpic :istransform="seen"></changpic>
</template>
父组件中script：
data(){
return{
seen:false
}
}
子组件中则可以在script中用props属性接受数据，与data同等级。
props:['istransform']
则可以在模板中使用
<template>
{{istransform}} //false
</template>
2.1.2、传多个数据
步骤：
1）先在data中定义一个数组接收数据，arr:[ ]
2）写一个计算该属性的方法，用Vue的全局方法set来实时更新数据的变化， 并且返回该值,
set方法的三个参数分别代表：（需要设置的数据，需修改数据的下标，设置新的数据）
3）后面步骤和传单个数据相同，只是传的是该计算属性的方法
当然还有一种比较麻烦的方法就是跟传单个数据一样，一个一个的传
代码如下：
父组件中
<template>
<div>
<child :tranData="transToChild"></child>
</div>
</template>
<script>
import child from './components/child'
import Vue from 'vue'
export default {
name: 'parent',
data() {
return {
num:123,
year:'三年‘，
arr:[ ]
}
},
computed:{
transToChild(){
return Vue.set(this.arr,0,[this.num,this.year]);
}
}
}
</script>
子组件中：
<template>
<div>
{{tranData}}
</div>
</template>
<script>
export default {
name: 'child',
props:["tranData"],
data() {
return {
}
}
}
</script>
三、子组件的数据如何传给父组件中
3.1、原理：event（事件）和$emit传送
3.2.步骤：
1）在子组件中设置一个事件，该事件的方法利用$emit返回需要传送的数据
2）父组件中以子组件传过来的$emit名称设置一个事件，从而获得数据
3.3、代码如下
子组件中：
<template>
<div>
<div @click="tranMessage"><div>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
msg:"this message is from child to parent"
}
},
methods:{
tranMessage(){
return this.$emit("eventName",this.message);
}
}
}
</script>
父组件中
<template>
<div>
<child @
eventName = “showMessage”></child>
</div>
</template>
<script>
import child from './components/child'
import Vue from 'vue'
export default {
name: 'parent',
data() {
return {
isTrue:false
}
},
methods:{
showMessage(message){
console.log(message) //this message is from child to parent
}
}
}
</script>
四、当子组件向父组件中不传送数据，而只是子组件发生某个事件，而需要改变父组件的效果，也可以用上述的方法，但不用传值，父组件中可以用事件的方法改变某个属性，从而达到效果。一般用于弹窗
比如子组件中点击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'） //不解除绑定则下次触发依次增多
}