1.父传子(props属性)
父
<template>
<div class="home">
<HelloWorld :count="msg"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
},
data() {
return {
msg:1
}
},
}
</script>
子
<template>
<div class="hello">
{{count}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
count:{
require:true
}
}
}
</script>
<style scoped lang="less">
</style>
2.子传父(自定义事件)
$emit('事件名','穿的数据'
3.兄弟传值
main.js
Vue.prototype.$bus= new Vue()
组件1.vue
this.$bus.$emit('didi','我是弟弟')
组件2.vue
getDidi(e){
this.xiongdi=e
console.log(e);
}
},
created(){
this.$bus.$on('didi',this.getDidi)
}