在Vue 2中,可以使用props和$emit来实现子组件向父组件传值(子传父)和父组件向子组件传值(父传子)。
子传父(子组件向父组件传值)的基本用法如下:
下面是一个示例:
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<p>子组件传递的值:{{ messageFromChild }}</p>
<child-component @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageFromChild: ''
};
},
methods: {
handleChildEvent(message) {
this.messageFromChild = message;
}
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<h3>子组件</h3>
<button @click="sendMessageToParent">向父组件传递消息</button>
</div>
</template>
<script>
export default {
methods: {
sendMessageToParent() {
const message = 'Hello, parent!';
this.$emit('child-event', message);
}
}
};
</script>
在上述示例中,子组件通过点击按钮触发sendMessageToParent
方法,该方法通过$emit
触发了名为child-event
的自定义事件,并将消息作为参数传递给父组件。父组件通过监听child-event
事件,在handleChildEvent
方法中获取到子组件传递的值,并将其赋值给messageFromChild
属性,从而实现了子传父。
父传子(父组件向子组件传值)的基本用法如下:
下面是一个示例:
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<child-component :message="messageFromParent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageFromParent: 'Hello, child!'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<h3>子组件</h3>
<p>父组件传递的值:{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
在上述示例中,父组件通过:message="messageFromParent"
将messageFromParent
的值传递给子组件的message
属性。子组件通过props选项声明了message
属性,并在模板中使用{{ message }}
来显示父组件传递的值,从而实现了父传子。