vue插件学习（二）通过父组件传递参数改变loading动画样式

在前面的学习中，我完成了一个简单的loading动画插件，但是插件的内容是写死了的，也就是说外部没有办法改变插件的样式。所以在今天我的目标是让插件的样式可以通过父组件传入参数来改变我的插件的一些样式。

父组件参数的传递

通过vue组件的v-bind属性就可以实现父组件到子组件数据的传递，在子组件中只需要使用porps接受数据就行了。
父组件：

<v-bounce-loading :squareColor="'rgb(0, 0, 20)'"></v-bounce-loading>

子组件：

<template>
  <div class="bounce-loading" :squareColor="squareColor" ref="bounceLoading">
    <div class="block block_1"></div>
    <div class="block block_2"></div>
    <div class="block block_3"></div>
    <div class="block block_4"></div>
  </div>
</template>

<script>
export default {
  props: {
    squareColor: {
      type: String,// 数据类型
      default: 'rgb(20, 220, 20)'// 默认值
    }
  };
</script>

改变小方块的样式（颜色）

要动态改变css样式，就需要通过js去改变样式，首先我们需要拿到DOM，在vue中要拿到DOM还是很简单的，在你需要的标签上面加上ref 属性。

<div class="bounce-loading" :squareColor="squareColor" ref="bounceLoading">
    <div class="block block_1"></div>
    <div class="block block_2"></div>
    <div class="block block_3"></div>
    <div class="block block_4"></div>
</div>

然后使用this.$refs.bounceLoading，这里的bounceLoading 上面ref属性的值，相当于你给这个标签取的一个名字，当然，是在vue中才有效的名字。
通过console.log()来看一下效果。

image.png

现在我需要的是获得每个小方块的DOM，我用的是下面的方法

let blocks = this.$refs.bounceLoading.getElementsByClassName('block');// 获取所有小方块的DOM
    for (let i = 0; i < blocks.length; i++) {// 遍历数组
      console.log(blocks[i]);
      blocks[i].style.background = this.squareColor;// 改变每个小方块的颜色
    }

下面就是获取的结果

image.png

效果图

bounce-loading-2.gif

总结

总的来说效果还不错，不过我也不知道我用的是不是很好的解决方案，如果谁有更优秀的解决方案，希望不吝赐教。