Vue组件（.vue⽂件）
Vue组件
组件的构成
⼀个.vue⽂件就是⼀个组件
组件都是由三部分组成：html结构（html结构都是在template标签中）、js逻辑、css样式1）template只能解析⼀个根标签
2）js逻辑都是在script标签中，必须设置导出，export default {...}
3）css样式都是在style标签中，必须设置scoped属性，是样式组件化
<template>
<div class="first-cp">
<h1>第⼀个组件</h1>
</div>
</template>
<script>
// .vue⽂件类似于模块，可以直接相互导⼊，所以在组件内部要设置导出
export default {
}
</script>
<style scoped>
/* scoped可以使样式组件化，只在⾃⼰内部起作⽤ */
</style>
根组件占位渲染页⾯组件
<!--
1) App.vue是项⽬的根组件，是唯⼀由main.js加载渲染的组件，就是替换index页⾯中的<div id="app"></div>的占位标签
2) 实际开发中App.vue⽂件中，只需要书写下⽅五⾏代码即可（可以在此基础上额外增加其他代码）
3）router-view是前台路由占位标签，由router插件控制，可以在router的配置⽂件中进⾏配置
4) router-view就是根据router在index.js中配置的路由关系，完成指定路径匹配指定页⾯组件，进⾏渲染
5) router-view会被不同的页⾯组件替换，就形成了页⾯跳转
-->
<template>
<div id="app">
<!-- 前台路由占位标签，末尾的/代表单标签的结束 -->
<router-view />
</div>
</template>
组件数据局部化处理
"""
1）不管是页⾯组件还是⼩组件，都可能会被多次复⽤
2）复⽤组件，其实就是复⽤组件的页⾯结构、页⾯样式、页⾯逻辑
3）但是页⾯上的数据需要区分（被复⽤的两个组件数据多少是有区别的），所以组件的数据要做局部化处理
4）借助函数可以产⽣局部作⽤域的特点，为每⼀次复⽤组件产⽣⼀个独⽴的作⽤域
语法:
data () {
421事件内容return {
// 数据们
}
}
"""
案例：
⼦组件
<template>
<div class="beat" @click="count += 1">
{{ count }}下
</div>
</template>
// 不管是页⾯组件还是⼩组件，都可能被复⽤，页⾯结构与样式都可以采⽤⼀套，但是数据⼀定要相互独⽴        data () {
return {
count: 0
}
}
}
</script>
<style scoped>
.beat {
width: 100px;
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
border-radius: 50%;
}
</style>
⽗组件
<template>
<div class="home">
<Beat/>
<Beat/>
</div>
</template>
<script>
import Beat from '@/components/Beat'
export default {
components: {
Beat,
}
}
</script>
⽗组件传递数据给⼦组件"""
⼀、组件传参 - ⽗传⼦
1）在⼦组件内部通过props设置组件的⾃定义属性
props: ['abc', 'goods']
2）在⽗组件中渲染⼦组件是对⾃定义属性赋值即可
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
"""
⼦组件：
<template>
<div class="goods-box">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
name: "GoodsBox",
// 在组件内部通过props定义组件的⾃定义属性
props: ['abc', 'goods'],
}
</script>
<style scoped>
.goods-box {
width: 260px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
margin: 20px;
float: left;
overflow: hidden;
text-align: center;
}
img {
width: 260px;
height: 260px;
}
</style>
<div class="goods">
<div class="main">
<!-- 在使⽤⼦组件是对⾃定义属性赋值即可 -->
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
let goods_list = [
{
img: require('@/assets/img/001.jpg'),
title: '⼩猫',
},
{
img: require('@/assets/img/004.jpg'),
title: '⼩狗',
},
];
export default {
name: "Goods",
data () {
return {
goods_list,
}
},
components: {
GoodsBox,
},
}
</script>
⼦组件传递数据给⽗组件
"""
⼆、组件传参 - ⼦传⽗
前提：⼦组件是被⽗组件渲染的，所以⼦组件渲染要晚于⽗组件
1）⼦组件⼀定要满⾜⼀个条件，才能对⽗组件进⾏传参（某个时间节点 === 某个被激活的⽅法）
eg：i）⼦组件刚刚加载成功，给⽗组件传参 ii）⼦组件某⼀个按钮被点击的时刻，给⽗组件传参 iii）⼦组件要被销毁了，给⽗组件传参2）在⼦组件满⾜条件激活⼦组件的⽅法中，对⽗组件发出⼀个通知，并将数据携带处理（⾃定义组件事件）
<div class="goods-box" @click="boxClick"></div>
methods: {
boxClick () { this.$emit('receiveData', ds.title, '第⼆个数据', '第三个数据') }
}
3）在⽗组件渲染⼦组件时，为⾃定义事件绑定⽅法
<GoodsBox @receiveData="recFn"/>
4）在⽗组件实现绑定⽅法时，就可以拿到⼦组件传参的内容（接收到了通知并在⽗组件中相应）
methods:{
recFn(title,data2,data3){
console.log('接收到了'+title);
}
注意：组件标签不能绑定系统定义的事件，没有意义，⼦组件的事件都是在⾃⼰内部完成
"""
⼦组件
<template>
<div class="goods-box" @click="boxClick">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
props: ['abc', 'goods'],
methods: {
boxClick () {
/
/ 通知⽗级 - ⾃定义组件的事件 'receiveData'，然后把数据 ds.title 传给⽗组件
this.$emit('receiveData', ds.title)
}
}
}
<template>
<div class="goods">
<div class="main">
<!-- 实现⾃定义事件，接收⼦组件通知的参数 -->
<GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
export default {
name: "Goods",
data () {
return {
goodsTitle: '哪个',
}
},
methods: {
recFn(title) {
console.log('接收到了' + title);
}
},
components: {
GoodsBox,
},
}
</script>
组件的⽣命周期钩⼦
"""
⼀、组件的⽣命周期：⼀个组件从创建到销毁的整个过程
⼆、⽣命周期钩⼦：在⼀个组件⽣命周期中，会有很多特殊的时间节点，且往往会在特定的时间节点完成⼀定的逻辑，特殊的时间节点可以绑定钩⼦注：钩⼦ - 提前为某个事件绑定⽅法，当满⾜这个事件激活条件时，⽅法就会被调⽤ | 满⾜特定条件被回调的绑定⽅法就称之为钩⼦
"""
<template>
<div class="goods">
<Nav />
</div>
</template>
<script>
import Nav from "../components/Nav";
export default {
name: "Goods",
components: {
Nav,
},
beforeCreate() {
console.log('该组件要被加载了')
},
created() { // 重要：请求后台数据，将请求的结果保存在前台页⾯
console.log('该组件被加载成功了')
},
updated() { // 以及beforeUpdate钩⼦，监听着页⾯中的所有数据
console.log('数据更新了')
},
destroyed() {
console.log('该组件销毁了')
}
}
</script>