vue的组件传值分为三种方式:父传子、子传父、非父子组件传值
父子组件的关系可以总结为 prop 向下传递,事件向上传递
父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
下面我们就开始用代码详细的介绍vue组件传值的三种方式
1、父传子
子组件的代码:
<template>
<div id="container">
{
{
msg}}
</div>
</template>
<script>
export default {
data() {
return {
};
},
props:{
msg: String
}
};
</script>
<style scoped>
#container{
color: red;
margin-top: 50px;
}
</style>