[Vue组件及组件之间的通信]一.Vue脚手架的使用；二.Vue的组件和组件之间的通信

目录

一.Vue脚手架的使用

1.通过命令行使用vue-cli的指令创建：vue init webpack 项目名称

2使用webStorm软件：本质仍然使用vue脚手架

3.使用vue ui创建：vue提供的图形化的操作界面

二.Vue的组件和组件之间的通信

1.组件：是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用。

2.组件的创建：

（1）非脚手架方式下创建：

（2）使用template创建组件

（2）在WebStorm中使用脚手架创建组件：

3.组件中的data：

（1）每个组件都有自己的数据：即每个组件都有自己的data

（2）vue实例的data和组件的data的区别：

4.组件中的methods：和vue实例中的methods用法相同

5.Vue组件之间的通信（组件之间的数据传递）

（1）Vue组件之间的关系：

（2）父组件向子组件传递数据：通过props方式向子组件传递数据（在子组件中添加props属性）

（3）子组件向父组件传值：是通过事件的形式来实现 

---

一.Vue脚手架的使用

1.通过命令行使用vue-cli的指令创建：vue init webpack 项目名称

        build文件夹： 用于webpack打包配置文件夹

        config文件夹：与webpack相关的配置文件夹

        |—— index.js：可以改变项目默认的端口号

        node_moudles：npm 安装的支持项目运行的库

        src文件夹：项目源代码目录

        |—— assets：资源目录，存放图片、css、js文件等

        |—— components：组件文件夹，用来存放用户自定义的组件

        |—— router：路由文件夹，用来存放路由文件

        ​|—— App.vue：根组件。可以包含其他组件

        |—— main.js：vue项目的入口js文件

        static文件夹：用来存放静态资源

        index.html：vue项目的页面文件（首页）

        package.json：npm的配置文件（所有包的信息）

2使用webStorm软件：本质仍然使用vue脚手架

        public文件夹：

        ​|—— index.html：Vue项目的入口文件

        src文件夹：

        |—— assets：资源目录，存放图片、css、js文件等

        |—— components：组件文件夹，用来存放用户自定义的组件

        |—— App.vue：根组件。可以包含其他组件

        |—— main.js：vue项目的入口js文件

        package.json：npm的配置文件（所有包的信息）

        vue.config.js：vue项目自身的配置文件

3.使用vue ui创建：vue提供的图形化的操作界面

        vue ui

二.Vue的组件和组件之间的通信

1.组件：是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用。

2.组件的创建：

（1）非脚手架方式下创建：

        ​第一步：使用Vue.extend创建组件

        第二步：使用Vue.component注册组件

        第三步：在html页面中使用组件

    <div id="app">
        <my-com></my-com>  <!-- 使用组件：名称之间用'-'连接  -->
    </div>
    <script>
        //第一步：使用Vue.extend创建组件
        var mycom = Vue.extend({