Vue组件基础
创建组件? ?组件通信? t
odo案例
学习目标：
? ? ? ? ? ? ? ? ? ? ?1.能够理解vue组件概念和作用
? ? ? ? ? ? ? ? ? ? ?2.能够封装创建组件
? ? ? ? ? ? ? ? ?? ? 3.能够使用组件之间通信
? ? ? ? ? ? ? ? ? ? ?4.能够完成tool案例
01.VUE组件创建和使用：
?多套相同结构标签，变量区分开，分别控制，这样好么？
遇到重复标签想复用？
封装成组件
组件好处？
各自独立，便于复用
1.1.组件概念
组件是可以服用的Vue实例，封装标签，样式和JS代码
组件化：封装的思想，把页面上“可重用的部分”封装为“组件”，从而方便项目开发和维护
一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构，样式和行为（html,css,js)
知识小节
组件是什么？
? ? ? ? ? ?可复用的vue实例，封装标签，样式，js
什么时候封装组件？
? ? ? ? ? ?遇到重复标签，可复用的时候
组件好处？
各自独立互不影响
1.2组件_基础使用
目标：每个组件都是一个独立的个体，代码里体现一个单独的.vue文件
1.创建组件，封装要复用的标签，样式，js代码
2.注册组件：全局注册 — main.js中?
3.局部注册 - 某vue文件内--语法如图：
1.3组件-scoped作用
准备：当前组件内标签都被添加data-v-hash值的属性
获取：css选择器都被添加[data-v-hash值]的属性选择器
Vue组件内样式，只针对当前组件内标签生效如何做？
给style上添加scoped
原理和过程是什么？
会自动给标签添加data-v-hash值属性，所有选择都带属性选择
02.Vue组件通信
? ? 组件通信_父传子_props
? ? ?目标：父组件 -子组件 传值
? ? ? 首先要明白父和子是谁，在父引入子（被引入的是子）
? ? ? 父：App.vue
? ? ? 子：MyProduct.vue
? ? ? 1.子组件内，定义变量，准备接收，然后使用变量
? ? ? 2.父组件（App.vue)内，要展示封装的子组件（MyProduct.vue)
? ? ? ? ?引入组件，注册组件，使用组件，传值进去
知识小结：
什么时候需要父传子技术？
从一个vue组件里把值传给令一个vue组件（父—>子）
父传子口诀（步骤）是什么？
子组件内，props定义变量，在子组件使用变量
父组件内，使用子组件，属性方式给props变量传值
2.1组件通信_父向子-配合循环使用
目标：父组件 ->子组件 循环使用--传值
2.2_单向数据流
目标：从父到子的数据流向，叫单向数据流。
原因子组件修改，不通知父级，造成数据不一致性
Vue规定props里的变量，本身是只读的
知识小结：
为何不建议，子组件修改父组件传过来的值？
会造成父子数据不一致，而且子组件是依赖父传入的值
什么是单向数据流？
从父到子的数据流向，叫单向数据流
props里定义的变量能修改么？
不能，props里的变量本事是只读的