【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>