組件注冊

一個vue組件要先被注冊，這樣vue才能在渲染模版時找到其對應的實現。有兩種注冊方式：全局注冊和局部注冊。（組件的引入方式）

以下這種屬于局部引用。

組件傳遞數據

注意：props傳遞數據，只能從父級傳遞到子級，不能反其道而行。

App.vue組件;就引入了父親

<template>
<parentDemo/>
</template>
<script>
import parentDemo from './components/parentDemo.vue';
export default{components:{parentDemo}
}
</script>
<style></style>

parentDemo.vue組件引入chirdren:

<template><div><h3>parent</h3><!-- 顯示組件（動態） --><chirdrenDemo :title="message"/></div>
</template>
<script>
// 引入組件
import chirdrenDemo from './chirdrenDemo.vue';
export default{data(){return{message:"shuju!"}},// 注入組件components:{chirdrenDemo},}
</script>

chirdenDemo.vue接受父親傳來的數據：

<template><div><h3>children</h3><!-- 進行顯示 --><p>{{ title }}</p></div>
</template>
<script>
export default{data(){return{}},// 完成組件數據傳參props:['title']
}
</script>

最后：

組件傳遞多種數據類型的傳輸

App.vue:

<template>
<parentDemo/>
</template>
<script>
import parentDemo from './components/parentDemo.vue';
export default{components:{parentDemo}
}
</script>
<style></style>

<template><div><h3>parent</h3><!-- 顯示組件（動態） --><chirdrenDemo :title="message" :age="age" :names="names" :userifor="userifor"/></div>
</template>
<script>
// 引入組件
import chirdrenDemo from './chirdrenDemo.vue';
export default{data(){return{message:"shuju!",age:20,names:['1q','2e','3d'],// 對象類型userifor:{name:'1q',age:20    }}},// 注入組件components:{chirdrenDemo},}
</script>

childrenDemo.vue；

<template><div><h3>children</h3><!-- 進行顯示 --><p>{{ title }}</p><!-- 數值類型 --><p>{{ age }}</p><!-- 數組類型 --><ul><li v-for="(iteam,index) of names" :key="index">{{ iteam }}</li></ul><!-- 接受對象類型 --><p>{{ userifor.name }}</p><p>{{ userifor.age }}</p></div>
</template>
<script>
export default{data(){return{}},// 完成組件數據傳參props:['title','age','names','userifor']
}
</script>