组件通信和cli的安装使用

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

1. 父子组件通信： 父组件将自己的数据传递给子组件

1. 父组件将自己的数据通过属性绑定的形式传递给子组件
   <Son :aa = "money"></Son>
2. 子组件在自己的配置项中通过 props 来接收这个属性

Vue.component('Son',{
  template: '#son',
  // props: ['aa'],
  props: {
    // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
    'aa': Number 
  }
})

3. 这个属性可以直接像全局变量一样使用
   <p> 我老爸给了我：{{ aa }} 钱 </p>

<div id="app">
    <Father></Father>
</div>
<template id="father">
    <div>
        <h3> 这里是father </h3>
        <Son :aa = "money"></Son>
    </div>
</template>
<template id="son">
    <div>
        <h3> 这里是son </h3>
        <p> 我老爸给了我：{{ aa }} 钱 </p>
    </div>
</template>

Vue.component('Father',{
    template: '#father',
    data () {
        return {
            money: '1000'
        }
    }
})

Vue.component('Son',{
    template: '#son',
    // props: ['aa']
    props: {//数组或对象都行
      // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
      'aa': Number 
    }
})
new Vue({
    el: '#app'
})

2. 子父组件通信 ：子组件将一个数据发送给父组件

1. 自定义事件
   • 流程：
   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. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改
   • 这个形式违反了单向数据流，用的少

<div id="app">
    <Father></Father>
</div>
<template id="father">
    <div>
        <h3> 这里是father </h3>
        <p> 这里有 {{ num }} 钱 </p>
        <hr>
        <Son @aa = 'add'></Son>
    </div>
</template>
<template id="son">
    <div>
        <h3> 这里是son </h3>
        <button @click = "give"> give money </button>
    </div>
</template>

Vue.component('Father',{
    template: '#father',
    data () {
        return {
          num: 0
        }
    },
    methods: {
        add ( val ) {
            console.log('add')
            this.num += val
        }
    }
  })
Vue.component('Son',{
    template: '#son',
    data () {
        return {
          money: 1000
        }
    },
    methods: {
        give () {
          this.$emit('aa',this.money)
        }
    }
  })
new Vue({
  el: '#app'
})

3. 非父子组件通信

1. 使用ref链绑定

<div id="app">
    <Brother ref = "brother"></Brother>
    <Sister ref = 'sister'></Sister>
</div>
<template id="brother">
    <div>
      <h3> 这里是brother </h3>
      <button @click = 'give'> give sister money </button>
    </div>
</template>
<template id="sister">
    <div>
        <h3> 这里是sister </h3>
        <p> 我有 {{ jk }} </p>
    </div>
</template>

Vue.component('Brother',{
    template: '#brother',
    data () {
        return {
          money: 1000
        }
    },
    methods: {
        give () {
          this.$parent.$refs.sister.jk = this.money
        }
    }
  })
Vue.component('Sister',{
    template: '#sister',
    data () {
        return {
          jk: 0
        }
    }
})
new Vue({
  el: '#app'
})

2. 使用事件总线（bus总线）

var bus = new Vue()//修改
Vue.component('Brother',{
    template: '#brother',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
          bus.$emit('aa',this.money)//修改
      }
    }
})
Vue.component('Sister',{
    template: '#sister',
    data () {
        return {
          jk: 0
        }
    },
    mounted () {
        bus.$on('aa',( val ) => {//修改
          this.jk += val
        })
    }
})
new Vue({
    el: '#app'
})

4. 多组件的状态共享 vuex
5. 多级组件通信 $attr( 扩展 )
6. vue-router

cli安装使用

1. cli是什么？

   • cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generator

2. cli的版本

   • 目前最新 3.x
   • 老版本是 2.x

3. cli的底层的自动化工具是： webpack

4. cli的安装

   • npm/cnpm/yarn 都可以使用

     1. $ yarn add @vue/cli global 这个是cli3的版本
     2. $ yarn add @vue/cli-init global 这个是cli2的版本

   • 如果学安装3失败了，那么你可以使用cnpm继续安装

     1. $ cnpm i @vue/cli -g 这个是cli3的版本
     2. $ cnpm i @vue/cli-init -g 这个是cli2的版本

   • 如果还有问题：那么就不要使用cli3了，可以单独安装cli2

     • $ cnpm i vue-cli -g

5. 验证是否安装成功

   • 命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

6. 创建项目

   • 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