vue组件开发props传递的示例

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <my-user></my-user>
  </div>
</template>

<script>
import MyUser from "@/components/MyUser";

export default {
  name: 'App',
  components: {
    MyUser
  }
}
</script>

<style>

</style>

MyUser.vue

<template>
    <div class="MyUser">
        <user-info
            :username = username
            :age = age
            :isSingle = isSingle
            :car = car
            :hobby = hobby
        ></user-info>
    </div>
</template>

<script>
    import UserInfo from "@/components/UserInfo";
    export default {
        name: "MyUser",
        components:{
            UserInfo
        },
        data(){
            return {
                username :'虾米大王',
                age : 18,
                isSingle : false,
                car :{
                    brand :'奔驰'
                },
                hobby:['篮球','足球','乒乓球']
            }
        }
    }
</script>

<style scoped>
    .MyUser{
        width: 50%;
        height: 300px;
        background-color: lightpink;
    }
</style>

UserInfo.vue

<template>
    <div class="UserInfo">
        <h3>我的个人简介</h3>
        <p>用户名：{{ username }}</p>
        <p>年龄：{{ age }}</p>
        <p>单身：{{ isSingle ? '是':'否'}}</p>
        <p>私家车：{{ car.brand }}</p>
        <p>爱好：{{ hobby.join(',') }}</p>
    </div>
</template>

<script>
    export default {
        name: "UserInfo",
        props : ['username','age','isSingle','car','hobby']
    }
</script>

<style scoped>
    .UserInfo{
        width: 240px;
        height: 80%;
        border: 1px solid lightblue;
    }
</style>