Vue组件实践

最近使用Vue之后一直用iView作为UI库。每次看到整齐划一的样式都不免概叹开源社区真好，让我省了多少时间呀。虽然产品某些奇葩的要求不能通过这些UI库实现，但是基于这些UI库的二次开发难度也不大，毕竟从1到2远比从0到1难。感谢无私奉献的开发者们。

以下记录自己Vue组件的实践过程。此篇不包括打包编译。

基础：组件之间通信

1. Vue的父子组件通信一般用props就能传过去。但是仅限于父传到子组件。

// 父组件
<template>
  <div>
    <hello-form :name="name"></hello-form>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        name: 'child-component'
      }
    }
  }
</script>

// 子组件
<template>
  <div>{{ newStr }}</div>
</template>
<script>
  const str = 'This is ';
  export default {
    data () {
      return {

      }
    },
    props: ['name'],
    computed: {
      newStr: function () {
        return `${str}${name}`
      }
    }
  }
</script>

2. 如果希望子组件的数据传到父组件，可以用emit

// 父组件
<template>
  <div>
    <hello-form :type="type" @onchange="getComponentData"></hello-form>  
  </div>
</template>
<script>
  export default {
    data () {
      return {
        type: 'form'
      }
    },
    methods: {
      getComponentData (data) {
        console.log(data);
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="name">
    <button @click="getData()">确认</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        name: 
      }
    },
    methods: {
      getData () {
        this.$emit('onchange', this.name);
      }
    }
  }
</script>

当点击子组件的确认按钮时，getData方法触发了这个组件的onchange事件。而name就作为这个事件的传递参数传递到了getComponentData方法中，父组件就得到了子组件的name。

3. 如果希望两个没有关联的子组件之间进行数据通信，可以用Vuex（在此不展开讲），或者简单点，用一个全局的bus

1
2
3

// bus.js
import Vue from 'vue'
export var bus = new Vue();

// child_1
<template>
  <div>
    <span>子组件1</span>
    <input v-model="emitData"></input>
  </div>
</el-form-item>
</template>
<script>
  import { bus } from '../bus.js'
  export default {
    data () {
      return {
        emitData: '',
      }
    },
    watch: {
      emitData: function (newVal, oldVal) {
        bus.$emit('emitData', this.emitData);
      }
    }
  }
</script>

// child_2
<template>
  <div>
    <span>子组件1</span>
    <input v-model="emitData"></input>
  </div>
</template>
<script type="text/javascript">
  import { bus } from '../bus.js'
  export default {
    data () {
      return {
        emitData: '',
      }
    },
    props: [],
    mounted: function () {
      bus.$on('emitData', (text) => this.emitData = text);
    }
  }
</script>

当child_1的emitData改变时，child_2中的emitData也会跟着改变。通过bus.$emit和bus.$on就完成了两个不相关的组件之间的数据传递。子组件与父组件之间也可以以这种方式通信。