Vue组件基础

◆ Vue组件概念, 创建和使用

组件是什么?

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

什么时候封装组件?

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

组件好处?

各自独立, 互不影响

创建和使用组件步骤?

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

注册组件 (全局 / 局部)

全局

 

局部

 

 

 

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

组件运行结果?

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

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

给style上添加scoped

原理和过程是什么?

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

带属性选择

---

◆ Vue组件通信

父组件 -> 子组件 传值

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

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

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

 

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

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

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

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

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

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

 

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

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

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

什么是单向数据流?

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

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

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

组件通信_子向父_自定义事件  

1. 父组件内, 绑定自定义事件和事件处理函数

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

 

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

 

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

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

子传父如何实现?

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

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

 组件通信-EventBus

常用于跨组件通信时使用

 

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

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

 

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

  在要 传递 值的组件(MyProduct.vue) eventBus .$emit ('事件名', 值)

什么时候使用eventBus技术?

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

eventBus技术本质是什么?

空白Vue对象, 只负责$on和$emit

 

---

◆ Todo案例

App.vue

 

TodoHeader.vue 

 

 

TodoMain.vue 

 

TodoFooter.vue