兄弟组件的数据传递
- 兄弟组件是指两者都没有互相引用,例如A组件没有使用B组件,B组件没有使用A组件。之间没有任何联系。
- 兄弟组件的数据传递,需要创建一个中间传递项,创建js文件。导入vue,导出一个vue实例
- A组件是一个发送数据的组件,要定义一个自定义事件,发送传递的值。
- B组件是一个接受数据的组件,要定义一个触发方法,$on
ement js文件创建
import Vue from 'vue'
export default new Vue()
A组件发送数据
<template>
<div id="app">
<p>{{message}}</p>
<hr>
<button @click="send">发送传递数据</button>
</div>
</template>
<script>
//导入ement文件
import ement from '@/components/ement.js'
export default {
data(){
return{
message:0
}
},
methods: {
send(){
this.message++
//创建自定义事件,将数据传递到了ement.js文件
ement.$emit("find",this.message)
}
},
}
</script>
B组件接受数据
<template>
<div id="app">
<p>{{number}}</p>
</div>
</template>
<script>
import ement from '@/components/ement.js'
export default {
data(){
return{
number:0
}
},
//created是一个内部事件,在初始化创建就被执行
created() {
//ement书法事件的方法
ement.$on('find',val=>{
this.number=val
})
},
}
</script>