1.父向子传递数据
父组件中传递数据 ↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<child :message="parentMessage"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>
子组件中接收数据 ↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
}
}
</script>
2.子组件向父组件传递数据
子组件中派发事件 ↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<button @click="sendMessage">Send message to parent</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from child')
}
}
}
</script>
父组件中监听事件并接收数据 ↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<child @message="receiveMessage"></child>
<div>{{ parentMessage }}</div>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
parentMessage: ''
}
},
methods: {
receiveMessage(message) {
this.parentMessage = message
}
}
}
</script>
3.子组件通过$emit方法调用父组件的函数
父组件中定义函数↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<child @childClick="handleClick"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
handleClick(event) {
console.log('Received: ' + event)
}
}
}
</script>
子组件中调用父组件的函数↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<button @click="emitClick">Send message to parent</button>
</div>
</template>
<script>
export default {
methods: {
emitClick() {
this.$emit('childClick', 'Hello from child')
}
}
}
</script>
4.父组件调用子组件的函数(ref,$resf)
子组件↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from child component!'
}
},
methods: {
childFunc(param1, param2) {
console.log(`Child function called with parameters: ${param1}, ${param2}`);
this.message = 'Child function was called';
}
}
}
</script>
父组件↓ ↓ ↓ ↓ ↓ ↓
通过this.$refs.childRef获取子组件的引用,并调用其中的childFunc()函数。在这里,我们传入了两个参数:'Hello'和'World'。
<template>
<div>
<button @click="callChildFunc">Call child component function</button>
<Child ref="childRef"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
callChildFunc() {
this.$refs.childRef.childFunc('Hello', 'World');
}
}
}
</script>
5.兄弟组件传递数据(vue3)
兄弟A↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<p>{{ dataFromA }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dataFromA: 'Data from Component A'
}
},
provide: {
sharedData: this.dataFromA
}
}
</script>
兄弟B↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<p>{{ sharedData }}</p>
</div>
</template>
<script>
export default {
inject: ['sharedData']
}
</script>
兄弟组件传递数据(vue2)
兄弟A↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<p>{{ dataFromA }}</p>
<button @click="emitData">Send Data to Component B</button>
</div>
</template>
<script>
export default {
data() {
return {
dataFromA: 'Data from Component A'
}
},
methods: {
emitData() {
this.$emit('my-event', this.dataFromA);
}
}
}
</script>
兄弟B↓ ↓ ↓ ↓ ↓ ↓
<template>
<div>
<p>{{ dataFromA }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dataFromA: null
}
},
mounted() {
this.$root.$on('my-event', (data) => {
this.dataFromA = data;
});
},
destroyed() {
this.$root.$off('my-event');
}
}
</script>
这就是一个 Vue 2 的兄弟组件传递数据的例子。需要注意的是,在 Vue 2 中使用 $root 不太推荐,因为它会使代码变得难以维护。你可以使用 Vuex 或 Bus 来实现更好的数据共享和管理。