Vue组件

最新推荐文章于 2025-03-09 10:09:01 发布

DingLei_

最新推荐文章于 2025-03-09 10:09:01 发布

阅读量143

点赞数

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

父子组件通信
props接收父子组件通信：父组件将自己的数据传递给子组件
父组件将自己的数据通过属性绑定的形式传递给子组件
子组件在自己的配置项中通过 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. 自定义事件
2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用
3. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改 - 这个形式违反了单向数据流，用的少
非父子组件通信 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',
})

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

验证是否安装成功命令行输入： $ 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