父组件给子组件传递数据
一、v-bind & props
// father.vue
<template>
<child :count="count" /> // 子组件
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
// child.vue
<template>
<h1>我是childOne组件</h1>
<p>我从父组件接受的参数count= {{count}}</p>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0
}
}
}
</script>
二、provide & inject
这种方式传递参数可以渗透到其子孙后台所有的组件。
// father.vue
export default {
provide() {
return {
count: () => this.count // 这样写以达到响应式效果
}
}
}
// child.vue
export default {
inject: ['count'] // 这里要注意这里接受的是一个方法。需要count()这样使用
}
子组件给父组件传递数据
$emit与自定义事件
// child.vue
<script>
...
mounted() {
this.$emit('nameFn',{name: 'child'});
},
...
</script>
// father.vue
<template>
<child @nameFn="nameFn" />
</template>
<script>
...
methods: {
nameFn(data) {
console.log(data)
}
}
...
</script>
兄弟组件之间传递数据
一、父组件作为中间件
该方式不实用,且写出来的代码不宜维护。这里不举例。
二、eventBus
使用这种方式有的人可能遇到了mounted中传递数据,并没有被接收到的问题。这个因为传递了数据后,接收方还没有被实例化。解决的方法:
一、将接收方(on )的组件放在传递方(emit)的组件的前面,让接收方先实例化。
二、将emit进行异步处理,setTimeout()。
// eventBus.js
import Vue from 'vue';
export default new Vue();
// borderOne.vue
<script>
import eventBus from '@/eventBus.js';
export default {
...
mounted() {
setTimeout(() => {
eventBus.$emit('nameFn', {name: '大哥'})
}, 0)
},
...
}
</script>
// borderTwo.vue
<script>
import eventBus from '@/eventBus.js';
export default {
...
mounted() {
eventBus.$on('nameFn', data => {
console.log(data);
})
},
...
}
</script>