Vue自定义组件与通信详解-优快云博客

本文链接：https://blog.youkuaiyun.com/tangxdashen/article/details/92010096

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接收

```javascript
/* 
    父子组件通信： 父组件将自己的数据传递给子组件
      1. 父组件将自己的数据通过属性绑定的形式传递给子组件
          <Son :aa = "money"></Son>
      2. 子组件在自己的配置项中通过 props 来接收这个属性
          Vue.component('Son',{
            template: '#son',
            // props: ['aa'],
            props: {
              // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
              'aa': Number 
            }
          })
      3. 这个属性可以直接向全局变量一样使用
        <p> 我老爸给了我：{{ aa }} 钱 </p>

  */
```

子父组件通信

自定义事件

/* 
子父组件通信： 
  子组件将一个数据发送给父组件

  如何实现：自定义事件

  流程： 
    1. 父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据
      Vue.component('Father',{
          template: '#father',
          data () {
            return {
              num: 0
            }
          },
          methods: {
            add ( val ) {
              console.log('add')
              this.num += val
            }
          }
        })
    2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件
        <Son @aa = 'add'></Son>
    3. 子组件可以通过 this.$emit( 自定义事件名称，参数1，参数2...) 来订阅这个自定义事件
        this.$emit('aa',this.money)
*/

```
 2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用
 3. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改
    - 这个形式违反了单向数据流，用的少

非父子组件通信

使用ref链绑定

  /* 
  非父子组件通信第一种形式 ： ref链绑定
  ref不仅可以绑定组件，也可以绑定普通元素

  业务： 别的组件中获取另外一个组件？ 
  解决： 绑定ref 
  */

使用事件总线（bus总线）

   /* 
       非父子组件通信第二种形式： 事件总线 
           事件的发布： 、$on
           事件的订阅    $emit

           通过 new Vue 在得到另外一个实例

       
     */

多组件的状态共享 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