安徽服饰网站建设html 网站开发

组件注册

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