【VUE】day04-组件的生命周期、组件之间的数据共享、ref引用、购物车案例
【VUE】day04-组件的生命周期、组件之间的数据共享、ref引用、购物车案例
- 1. 组件之间的关系
- 2. 使用组件的三个步骤
- 3. vue.components全局注册组件
- 4. 自动生成右边标签插件
- 5. 组件的props
- 6. 结合v-bind使用自定义属性
- 7. props的默认default值
- 8. type值类型
- 9. 组件之间的样式冲突问题
- 10. 组件的生命周期
- 10.1 了解beforeCreate和created生命周期函数的特点
1. 组件之间的关系
2. 使用组件的三个步骤
步骤一:使用import语法导入需要的组件
import Left from '@/components/Left.vue'
步骤二:使用component节点注册组件
<script>
// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'
export default {
data() {
return {
flag: true
}
},
// 2. 注册组件
components: {
Left,
Right,
Test
}
}
</script>
步骤三: 以标签的形式使用刚才注册的组件
<template>
<div class="app-container">
<h1>App 根组件</h1>
<button @click="flag = !flag">Toggle Flag</button>
<Test info="你好" v-if="flag"></Test>
<hr />
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
<!-- 3. 以标签形式,使用注册好的组件 -->
<Left></Left>
<Right></Right>
</div>
</div>
</template>
@路径提示的插件
3. vue.components全局注册组件
通过components注册的是私有子组件
例如:
在组件A的components节点下,注册了组件F。
则组件F只能用在组件A中,不能用在组件C中。
注册全局组件
在vue项目的main.js入口文件中,通过vue.component()方法,可以注册全局组件。示例代码如下
4. 自动生成右边标签插件
5. 组件的props
props是组件的自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性!
6. 结合v-bind使用自定义属性
props的值赋值给cout
7. props的默认default值
在生命自定义属性时,可以通过default来定义属性的默认值,示例代码如下:
8. type值类型
在声明自定义属性时,可以通过type来定义属性值的值类型。代码如下:
<template>
<div>
<h5>Count 组件</h5>
<p>count 的值是:{{ count }}</p>
<button @click="count += 1">+1</button>
<button @click="show">打印 this</button>
</div>
</template>
<script>
export default {
// props 是"自定义属性",允许使用者通过自定义属性,为当前组件指定初始值
// 自定义属性的名字,是封装者自定义的(只要名称合法即可)
// props 中的数据,可以直接在模板结构中被使用
// 注意:props 是只读的,不要直接修改 props 的值,否则终端会报错!
// props: ['init'],
props: {
// 自定义属性A : { /* 配置选项 */ },
// 自定义属性B : { /* 配置选项 */ },
// 自定义属性C : { /* 配置选项 */ },
init: {
// 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效
default: 0,
// init 的值类型必须是 Number 数字
type: Number,
// 必填项校验
required: true
}
},
data() {
return {
// 把 props 中的 init 值,转存到 count 上
count: this.init
}
},
methods: {
show() {
console.log(this)
}
}
}
</script>
<style lang="less"></style>
9. 组件之间的样式冲突问题
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面呈现的。
② 每个组件中的样式,都会影响整个index.html页面中的DOM元素。
解决办法:
方法1:
方法二:加上scoped
方法三:deep
<template>
<div class="left-container">
<h3>Left 组件</h3>
<hr />
<MyCount :init="9"></MyCount>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
h3 {
color: red;
}
// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5
// 当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到 /deep/
/deep/ h5 {
color: pink;
}
</style>
10. 组件的生命周期
生命周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段。
10.1 了解beforeCreate和created生命周期函数的特点
文档地址: https://v2.cn.vuejs.org/v2/guide/instance.html#生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
P18 TODO