组件注册

一个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>