vue中组件之间的传值方式

父子组件通信

1. 父组件传给子组件

   // 父
   <child :fontSize="fontSize" @onChangeSize="onChangeSize"></child>
   export default {
     methods: {
     onChangeSize(fontsize) {
         console.log('获取的子组件传过来的', fontsize)
     }
   }
   }
   ​
   // 子
   export default {
     props: {
       fontSize: {
         type: 'string',
         default: 0
       }
     }
     
   }
   

2. 子组件传给父组件

   // 在子组件函数中
   this.$emit('onChangeSize',10)// 把10传给父组件
   

3. 不向关组件的传值

   // eventbus.js 文件中定义  仅仅导入了vue
   import Vue from 'vue'
   export default new Vue()
   ​
   // 其他组件 1
   import bus from './eventbus.js'
   //...
   export default {
     methods: {
       add() {
         bus.$emit('numchange', this.value)
       }
     }
   }
   ​
   // 其他组件  2
   import bus from './eventbus.js'
   //...
   export default {
     methods: {
       getval() {
         bus.$on('numchange', (value) => {
           console.log('组件1传来的值', value)
         })
       }
     }
   }
   ​
   

4. 还有一些不被推荐的方式,一般只在项目比较小的情况下使用

   // $root   $children   $parent