vue中两个窗口如何实现传值
时间: 2023-11-30 09:04:41 浏览: 35
在 Vue 中,可以通过 props 和事件来实现两个窗口之间的传值。
1. 使用 props 传递数据
在父组件中,可以通过 props 将数据传递给子组件。在子组件中,可以通过 $emit 触发事件将数据传递回父组件。
父组件:
```html
<template>
<div>
<child-component :message="parentMessage" @update-message="updateParentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello, child!'
}
},
methods: {
updateParentMessage(message) {
this.parentMessage = message;
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
},
methods: {
updateMessage() {
const newMessage = 'Hello, parent!';
this.$emit('update-message', newMessage);
}
}
}
</script>
```
2. 使用事件传递数据
在父组件中,可以通过 $emit 触发事件将数据传递给子组件。在子组件中,可以通过 $emit 触发事件将数据传递回父组件。
父组件:
```html
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
<child-component @update-message="updateParentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello, child!'
}
},
methods: {
updateParentMessage(message) {
this.message = message;
},
updateMessage() {
const newMessage = 'Hello, child!';
this.$emit('update-message', newMessage);
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
methods: {
updateMessage() {
const newMessage = 'Hello, parent!';
this.$emit('update-message', newMessage);
}
}
}
</script>
```
阅读全文