自定义组件、组件通信及cli

最新推荐文章于 2024-06-30 08:00:00 发布

zheng_li_dong

最新推荐文章于 2024-06-30 08:00:00 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/zheng_li_dong/article/details/90690428

版权

1. 自定义组件（插件）

案例：封装一个 Loading 组件
Loading是用来做什么的？
基于用户体验
loading使用方式很多

第三方的ui库/组件库

自定义封装

过程：
创建一个目录文件夹，称之为Loading
在loading中创建一个叫做component目录，用来放模板
在Loading目录下创建一个index.js

~ import Vue from 'vue'
  import tpl from './component/index.html'
  const Loading = {
    // 自定义封装组件，这个loading对象中必须有一个关键key
    install () {
      Vue.component( 'Loading', {
        template: tpl
      })
    }
  }


  export default Loading

使用：

2. 自定义指令

3. 自定义的事件

v-on:click = ‘aa’
v-on:yyb = ‘aa’
v-on:before-enter: ‘’

自定义封装组件的使用
自定义事件的第二种使用形式

4. 组件通信 – 单项数据流 >9种

父子组件通信
1. props接收
子父组件通信
1. 自定义事件
2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用
3. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改
  - 这个形式违反了单向数据流，用的少
非父子组件通信
1. 使用ref链绑定
2. 使用事件总线（bus总线）
多组件的状态共享 vuex（目前不讲，后天）
多级组件通信 ) $attr( 扩展
vue-router （目前不讲，明天）

5. cli

cli是什么？
cli是vue提供的一个快速（自动化）构建项目的一个脚手架，类似于我们之前所学的 express-generator
cli的版本
目前最新 3.x
老版本是 2.x
cli的底层的自动化工具是： webpack
cli的安装
npm/cnpm/yarn 都可以使用
1. $ yarn add @vue/cli global 这个是cli3的版本
  如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
2. $ yarn add @vue/cli-init global
如果有的同学安装3失败了，
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
1. $ cnpm i @vue/cli -g 这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
1. $ cnpm i @vue/cli-init -g

如果还有问题：
那么你就不要使用cli3了，你可以单独安装cli2
```
 `$ cnpm i vue-cli -g`
```
验证是否安装成功
命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功
创建项目

cli3版本创建
1. 命令创建【推荐】
$ vue create project

    - 手动选择配置
    - 如果安装node-sass出问题，如何解决： 
      - 先切换成npm源   nrm use npm
      - 使用cnpm 安装  cnpm i node-sass sass-loader -D

2. 图形界面创建
    `$ vue ui`

cli2
1. 标准版
$ vue init webpack project
2. 简易版
$ vue init webpack-simple project