父向子传值
- 在父组件中,引入子组件,并注册好子组件
<script>
import Left from '@/components/LeftCom.vue'
export default {
data(){
return {
message:"hello 贝贝们",
userinfo:{name:"wsc","age":18}
}
},
components:{
Left
}
}
</script>
- 在父组件的模版中,用声明的组件名称加入子组件
<Left :msg="message" :user="userinfo"></Left>
msg 和user是子组件的变量,在这里需要用v-bind方式传值,不然传过去的是字符串
在子组件中,用props声明两个变量
<script>
export default{
props:["msg",'user']
}
</script>
- 在子组件的模版中即可用到父组件给到的值
<template> <div> <h3>Left组件</h3> message的值={{ msg }} <br> userinfo的值是{{ user }} </div> </template>