vue2 子组件向父组件传递属性
时间: 2024-03-27 11:33:35 浏览: 81
vue2.0 子组件改变props值,并向父组件传值的方法
在Vue2中,子组件向父组件传递属性可以通过自定义事件来实现。下面是一个示例:
1. 在父组件中,使用v-bind绑定属性将数据传递给子组件:
```html
<template>
<div>
<child-component :message="message" @update-message="updateMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello from parent'
};
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
};
</script>
```
2. 在子组件中,通过$emit触发自定义事件,并将数据传递给父组件:
```html
<template>
<div>
<button @click="sendMessage">Send Message to Parent</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('update-message', 'Hello from child');
}
}
};
</script>
```
在上述示例中,父组件通过v-bind将message属性传递给子组件,并在子组件中通过$emit触发update-message事件,并将新的消息作为参数传递给父组件的updateMessage方法。父组件接收到子组件传递的消息后,更新了message属性的值。
阅读全文