目录
1.组件组成结构在components文件当中新建文件MyApp.vue
引入
经过前面对vue的学习，接下来引进vue很重要的一个板块---vue组件的概念。
为什么引进组件呢？
组件最大的优势就是可复用性。
当使用构建步骤时，我们一般将vue组件定义在一个单独的.vue文件当中，这就被叫做单文件组织（SFC）
接下来的讲解还是以例子以及代码实现的结果为例进行展示。
一、组件基础
1.组件组成结构在components文件当中新建文件MyApp.vue
<template>
<div class="container">{{ message }}</div>
</template>
<script>
export default{
data(){
return{
message:'组件基础组成'
}
}
}
</script>
<!-- 让当前样式只在当前组件中生效 ，如果不加scoped那么.container将会是全局样式在任何组件当中使用-->
<style scoped>
.container{
font-size: 30px;
color: red;
}
</style>2.组件引用结构-----在App.vue当中设置如下属性
【框架：】
<script>
//第一步引入组件
import MyApp from './components/MyApp.vue';
export default{
//第二步：注册组件
components:{
MyApp //这里面的MyApp来自于import里面的MyApp（类似于mysql里面的as起别名）
}
}
</script>
<template>
<!--第三步:显示组件-->
<MyApp/>
</template>得到结果：
解释： 这里显示的内容来自于App.vue里面的<template>部分里面的<MyApp/>(本质还是引进的组件)，这部分相当于HTML里面的html部分；接着看<MyApp/>里面究竟是什么：也就是引用的MyApp.vue部分：MyApp.vue里面的template（也就是html部分--同时也是上述页面显示部分）是动态的message（动态数据来源于script里面的message：'组件基础组成'）；同时样式是<style>里面的部分（给class为'container'的元素填了样式）
【注：可以看出vue前端框架与HTML本质就是一个，结构非常相似：html对应template，script对应script，style对应style】
二、组件的嵌套关系
如上，接下来我们来实现这么一个嵌套关系的前端界面：
组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构
这和我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。
新建pages文件夹，并创建以下文件：
1.Header.vue
<template>
<h3>Header</h3>
</template>
<style scoped>
h3{
width:100%;
height:100px;
border:5px solid #999;
text-align: center;
line-height:100px;
box-sizing: border-box;
}
</style>2.Main.vue
<template>
<div class="main">
<h3>Main</h3>
</div>
</template>
<script>
</script>
<style scoped>
.main{
float:left;
width:70%;
height: 600px;
border: 5px solid #999;
box-sizing: border-box;
}
</style>3.Aside.vue
<template>
<div class="asside">
<h3>Aside</h3>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.asside{
float: right;
width:30%;
height: 600px;
border: 5px solid#999;
box-sizing: border-box;
border-left:0;
}
</style>上述1.2.3.是填在App.vue(root)里面的第一层嵌套，现在可以去App.vue中注册1.2.3.：
<script>
// 第一步，引入组件
import Header from './components/Header.vue';
import Main from './components/Main.vue';
import Aside from './components/Aside.vue';
export default{
//第二步，注册组件
components:{
Header ,//对应import部分的名字（符合驼峰命名法则）
Main,
Aside
}
}
</script>
<template>
<!-- 第三步显示组件 -->
<Header/>
<Main/>
<Aside/>
</template>
实现上述操作后我们去实现第一层嵌套的嵌套：
4.Article.vue
<template>
<h3>Article</h3>
</template>
<style>
h3{
width:80%;
margin:0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 50px;
background:#999;
}
</style>在Main.vue当中注册
代码：
<template>
<div class="main">
<div class="m">Main</div>
<Article/>
<Article/>
</div>
</template>
<script>
import Article from './Article.vue';
export default{
components:{
Article
}
}
</script>
<style scoped>
.main{
float:left;
width:70%;
height: 600px;
border: 5px solid #999;
box-sizing: border-box;
}
.m{
width:100%;
height:20%;
text-align: center;
line-height: 100px;
font-weight: 600;
background:rgba(169, 169, 169, 0.226);
}
</style>5.Itme.vue
<template>
<h3>Item</h3>
</template>
<style scoped>
h3{
width:80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 10px;
background:#999;
}
</style>在Aside.vue当中注册
代码：
<template>
<div class="asside">
<!-- Aside -->
<ITme/>
<ITme/>
<ITme/>
</div>
</template>
<script>
import ITme from './Itme.vue';
export default{
components:{
ITme
}
}
</script>
<style>
.asside{
float:right;
width:30%;
height:600px;
border:5px solid #999;
box-sizing: border-box;
border-left: 0;
}
</style>得到结果展示：
三、组件注册方式
一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册
局部注册：前边将的方案就是局部注册（在这里不再做过多赘述）
全局注册：
我们这里使用Header.vue来进行全局注册，
①:那么首先在App.vue当中取消局部注册。
②:在main.js当中设置全局注册方式
③最终在哪里需要就在哪里引入
全局注册虽然很方便，但有以下几个问题：
1.全局注册，但并没有被使用的组件无法在生产打包时被自动移除（也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的JS文件中
2.全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性
局部注册需要使用components选项
四、组件传递数据
组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的传递数据的解决方案就是props
1.首先我们新建一个Parent.vue
<template>
<h3>Parent</h3>
</template>
<script>
export default{
data(){
return{
}
}
}
</script>2.其次我们再新建Child.vue
<template>
<h3>Child</h3>
</template>
<script>
export default{
data(){
return{
}
}
}
</script>以上是两个没有什么关系的Parent.vue和Child.vue，我们想让Parent.vue给Child.vue传值，那么在此之前我们先让Parent成为Child的父组件
3.让Parent成为Child的父组件
也可以传递多个值
动态传递数据
注意事项：
props 传递数据，只能从父级传递到子级，不能反其道而行
五、组件传递多种数据类型
通过四、中props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等。但实际上任何类型的值都可以作为props的值被传递。
1.Number
①parent.vue
<template>
<h3>Parent</h3>
<Child :title="message" :age="age"></Child>
</template>
<script>
import Child from './Child.vue'
export default{
data(){
return{
message:"我是动态的数据！！！",
age:20
}
},
components:{
Child
}
}
</script>②Child.vue
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p>{{ age }}</p>
</template>
<script>
export default{
data(){
return{
}
},
props:["title","age"]
}
</script>③App.vue
<script>
// 第一步，引入组件
import Parent from './components/Parent.vue';
export default{
//第二步，注册组件
components:{
Parent
}
}
</script>
<template>
<Parent/>
</template> 得到结果展示：
2.Array
①Parent.vue
<template>
<h3>Parent</h3>
<Child :title="message" :age="age" :names="names"></Child>
</template>
<script>
import Child from './Child.vue'
export default{
data(){
return{
message:"我是动态的数据！！！",
age:20,
names:["张三","李四","王五"]
}
},
components:{
Child
}
}
</script>②Child.vue
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p>{{ age }}</p>
<ul>
<li v-for="(item,index) of names" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default{
data(){
return{
}
},
props:["title","age","names"]
}
</script>③App.vue不用作出修改
得到结果：
3.Object
①Parent.vue
<template>
<h3>Parent</h3>
<Child :title="message" :age="age" :names="names" :userInfo="userInfo"></Child>
</template>
<script>
import Child from './Child.vue'
export default{
data(){
return{
message:"我是动态的数据！！！",
age:20,
names:["张三","李四","王五"],
userInfo:{
name:"admin",
age:20
}
}
},
components:{
Child
}
}
</script>②Child.vue
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p>{{ age }}</p>
<ul>
<li v-for="(item,index) of names" :key="index">{{ item }}</li>
</ul>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</template>
<script>
export default{
data(){
return{
}
},
props:["title","age","names","userInfo"]
}
</script>③App.vue不用做出修改
得到结果：
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
