6.①拆分组件②Vue脚手架的安装③组件化开发案例：对vue的评论④组件之间传值：props通信组件，this.$emit

目录

一：单文件组件.vue

二：Vue脚手架安装

1.基本配置：

       安装Node.js

       安装淘宝镜像源

       安装Vue Cli3脚手架

       检查其版本是否正确

2.在想创建项目的目录

3.修改成项目代码

三：comment组件化开发案例：对vue的评论

四：父向子：props通信组件

五：子向父：this.$emit('undateData', params)

---

一：单文件组件.vue

TopBar组件

在页面引入并使用组件

在App.vue里引入需要的组件

二：Vue脚手架安装

官方文档

1.基本配置：

       安装Node.js

            保证node.js   8.9或者更高版本

            终端输入node -v,保证已安装成功

       安装淘宝镜像源

             npm install -g cnpm --registry=https://registry.npm.taobao.org

       安装Vue Cli3脚手架

            cnpm install -g @vue/cli

       检查其版本是否正确

            用vue -V来检测版本看脚手架是否安装成功

2.在想创建项目的目录

①vue create 名字       使用安装的脚手架创建一个新的vue项目（注意名称不能有大写字母）

这一步可能出错的问题，改成true

②选择这个

③成功

④yarn不好使 把那句话 换成  npm run serve

3.修改成项目代码

①按功能能细分组件

②import引入App页面需要的组件

③npm run serve  运行

三：comment组件化开发案例：对vue的评论

四：组件通信

1.父子间通信

①父向子：props通信组件

写法： 在父页面定义要传给子页面的方法

在父页面的子组件上这样写

在子页面上用props接收

        ①是组件通信最常用最简单的一种方式

        ②适用场合：适用于父子之间

②子向父：this.$emit('undateData', params)

写法：子页面名称VisitScreen.vue

父页面：

①标签里用@接收

 ②data里面定义一个空对象用来接收参数

③标签里面是onUpdateDate方法接收data 

2.兄弟间通信

3.跨层组件通信