前面已經瞭解過vue的元件化開發了，現在來了解一下父子元件。

1. 先來2個子元件
   myname.vue 內容如下：

<template>
    <div id="myname">我的名字是{{name}}</div>
</template>

<script>
    export default{
        props: ["name"]
    }
</script>

有個屬性name

myage.vue 內容如下：

<style>
    #myage{color:red}
</style
 
>

<template>
    <div id="myage">我的名字是{{age}}</div>
</template>

<script>
    export default{
        props: ["age"]
    }
</script>

有個屬性age

2.新建一個me.vue，作為上面2個元件的父元件，看看這個父元件是如何掛載子元件的？

<template>
    <div id="me">
        <myname name="jack">
 
</myname>
        <myage age="18"></myage>
    </div>
</template>

<script>
    import age  from "./myage.vue";
    import name  from "./myname.vue";

    export default{
        components:{"myname":name, "myage":age}
    }
</script>

要注意到給2個子元件屬性都賦值了

3.那麼我們在jssrc/index.js 就可以直接引入me.vue這個元件了

import Vue from "vue";


import me from "./../components/me.vue";

new Vue({
    el:".container",
    components:{"me": me} // 掛載元件
});

同樣在html/index.html模板裡就應該修改如下：

    <div class="container">
        <me></me>
    </div>

打包之後，檢視：

然而到了這裡，我們覺得還是有點兒麻煩

如果我就在模板上寫一個

<me name="張三" age="22"></me>

就可以自動載入該多好？

如何做到這一點呢？

1.修改me.vue

<template>
    <div id="me">
        <myname v-bind:name="name"></myname>
        <myage v-bind:age="age"></myage>
    </div>
</template>

<script>
    import age  from "./myage.vue";
    import name  from "./myname.vue";

    export default{
        props:["name","age"],
        components:{"myname":name, "myage":age}
    }
</script>

對比之前，我們發現在me.vue裡我們寫上了2個props：name和age， 然後在對應的子節點裡通過v-bind 繫結這2個屬性。

最後瀏覽器檢視效果：