vue学习笔记（四）——vue组件基础

一、Vue组件概念, 创建和使用

1.1 组件概念

组件是可复用的 Vue 实例，封装标签，样式和JS代码。

组件化：封装的思想，把页面上 ` 可重用的部分 ` 封装为 ` 组件 `，从而方便项目的开发和维护

一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构样式和行为(html，css和js)

组件是什么?

        可复用的vue实例，封装标签，样式，JS

什么时候封装组件?

        遇到重复标签，可复用的时候

组件好处?

        各自独立，互不影响

1.2 组件-基础使用

每个组件都是一个独立的个体，代码里体现为一个独立的.vue文件

① 创建组件，封装要复用的标签，样式，JS代码

② 注册组件

        全局注册 – main.js中

        

        局部注册 – 某.vue文件内

        

③ 使用组件

        

创建和使用组件步骤?

        创建.vue文件 – 标签 – 样式 – JS进去

        注册组件 (全局 / 局部)

        使用组件 (组件名用作标签)

组件运行结果?

        把组件标签最终替换成，封装的组件内标签

1.3 组件-scoped作用

准备: 当前组件内标签都被添加 data-v-hash值 的属性

获取: css选择器都被添加 [data-v-hash值] 的属性选择器

Vue组件内样式，只针对当前组件内标签生效如何做?

        给style上添加scoped

原理和过程是什么?

        会自动给标签添加data-v-hash值属性，所有选择都 带属性选择

二、Vue组件通信

2.1 组件通信-父传子-props

父组件 -> 子组件传值（ 父传子通过属性传递 ）

首先明确父和子是谁， 在父引入子 (被引入的是子)

        父: App.vue

        子: MyProduct.vue

① 子组件内，定义变量，准备接收，然后使用变量

② 父组件(App.vue)内，要展示封装的子组件(MyProduct.vue)

        引入组件，注册组件，使用组件，传值进去          

什么时候需要父传子技术?

        从一个vue组件里把值传给另一个vue组件(父->子)

父传子口诀(步骤)是什么?

        子组件内, props定义变量, 在子组件使用变量

        父组件内, 使用子组件, 属性方式给props变量传值

2.2 组件通信-父向子-配合循环

父组件 -> 子组件 循环使用-传值

每次循环obj和组件都是独立的，新的

循环使用组件注意事项?

        每次循环, 变量和组件, 都是独立的

2.3 单向数据流

从父到子的数据 流向， 叫单向数据流

Vue规定 props 里的 变量， 本身 是 只读 的

为何不建议，子组件修改父组件传过来的值?

        父子数据不一致，而且子组件是依赖父传入的值

什么是单向数据流?

        从父到子的数据流向，叫单向数据流

props里定义的变量能修改吗?

        不能，props里的变量本身是只读的

2.4 组件通信-子向父-自定义事件

子组件触发父自定义事件方法

① 父组件内，绑定自定义事件和事件处理函数

        语法：@自定义事件名="父methods里函数名"

② 子组件内，恰当的时机，触发父给我绑的自定义事件，导致父methods里事件处理函数执行

什么时候使用子传父技术?

        当子想要去改变父里的数据

子传父如何实现?

        父组件内，给组件@自定义事件="父methods函数"

        子组件内，恰当时机this.$emit('自定义事件名', 值)

2.5 组件通信-EventBus

App.vue里引入MyProduct.vue和List.vue

常用于跨组件通信时使用

语法

① src/EventBus/index.js – 创建空白Vue对象并导出

② 在要接收值的组件(List.vue)         

        eventBus.$on('事件名', 函数体)

③ 在要传递值的组件(MyProduct.vue)         

        eventBus.$emit('事件名', 值)

什么时候使用eventBus技术?

        当2个没有引用关系的组件之间要通信传值

eventBus技术本质是什么?

        空白Vue对象, 只负责$on（接收）和$emit（发射，传递）