组件注册
一个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>