Vue组件

任务分为非一. 组件通信 – 单项数据流 >9种

  1. 父子组件通信
  2. props接收父子组件通信: 父组件将自己的数据传递给子组件
  3. 父组件将自己的数据通过属性绑定的形式传递给子组件
  4. 子组件在自己的配置项中通过 props 来接收这个属性
 Vue.component('Son',{
            template: '#son',
            // props: ['aa'],
            props: {
              // 属性: 属性的数据类型  给数据做属性验证,验证数据类型
              'aa': Number 
            }
          })
 Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: '1000'
      }
    }
  })

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

  new Vue({
    el: '#app'
  })
  1. 子父组件通信 :
    1. 自定义事件
    2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件,子组件通过props接 收,然后直接使用
    3. 父组件可以将一个对象型的数据传递给子组件,子组件修改了这个数据,父组件也同 样会修改 - 这个形式违反了单向数据流,用的少
  2. 非父子组件通信 1. 使用ref链绑定
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',
    mounted () {
      console.log('====================================');
      console.log(this.$refs);
      console.log('====================================');
    }
  })
  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',
})
  1. 多组件的状态共享 vuex 5. 多级组件通信 ) $attr( 扩展 6. vue-router

5. cli1. cli是什么? cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generator2. cli的版本 目前最新 3.x 老版本是 2.x 3. cli的底层的自动化工具是: webpack4. cli的安装 npm/cnpm/yarn 都可以使用

  1. `$ yarn add @vue/cli global`    这个是cli3的版本
  如果我们还想使用cli2的脚手架,那么我们可以在安装一个包      1. `$ 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`
  1. 验证是否安装成功 命令行输入: $ vue 看是否有东西输出,如果输出命令提示,证明安装成功
  2. 创建项目
    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

你可能感兴趣的:(Vue组件)