# Vue Cli与组件化开发（vue 全家桶01）

Vue Cli官网：cli.vuejs.org/zh/guide/

## 脚手架文件目录介绍

1.第一步 创建vue脚手架 1.1注册全局组件（这里可以暂时理解为父组件） 更改脚手架中App.vue文件的内容(删除所有内容，然后按 shift 和 < 键 会生成快捷键)

2.第二步 项目入口文件 main.js

3. 创建子组件 （局部组件）

3.1局部组件创建在components文件夹下

3.2局部组件在父组件中导入（即目标组件如果不需要导入就不导入） 在scrip标签中导入 import 组件名 from '组件路径'

3.3 挂在组件 也在父组件中挂载

在export default里面写一个属性components

export default {

components: {

"标签名": 组件名

}

}

总结： 子组件像标签使用， 组件可以理解为一个自定义标签写在 父组件的 template中的div 标签中 <组件名></组件名>

父传子 与子传父

父传子

1.父组件使用 <组件名 自定义属性1 自定义属性2 自定义属性3.... ></组件名> 行内自定义属性传递 2. 子组件中声明 使用prpos:['自定义属性1','自定义属性2','自定义属性3' ]实际是在子组件中接收

总结： 父组件传子组件是单向数据流 一个传 一个接收 主要是父组件传值

子传父

1.先了解$emit()传递

1.第一步： 在子组件的template部分中的标签注册点击事件或者其他事件

2.第二步： 在子组件的vue文件中的methods:{}方法中发送事件通知

methods：{
doClick(){
this.$emit('时间名'，参数)
}
}

父组件处理 子传父
1.父组件在子组件标签中接收通知（无代码） 2.@事件名='事件处理函数' 3.最后在父父组件的methods:{}方法中处理此事件