组件中的样式问题，穿透和scale占位， 引入静态资源

样式穿透

形成的原因：父组件的样式用了scoped，而想用对子组件内部的样式进行调节，可以用/deep/；

       注意，是子组件内部，子组件最外层除外。

　　父组件对子组件的样式控制：

       父组件的样式就算用了scoped，也可以对引入的子组件的最外层元素样式进行控制。

　　　　子组件最外层通常用xx-container作为class；

　　　　父组件中，可以用xx-container来控制子组件的最外层，

　　　　　　

　　

       

 其实样式穿透产生的原因，首先是子元素本身的样式没有设计好。比如让子元素宽高占比都是百分比，则父元素可以用合适的尺寸元素来盛子元素。

scale占位

　　当想实现hover某个元素，然后弹出一个二维码，我将二维码先scale(0),在hover后将scale(1), 但是虽然二维码没有，此时scale是0，hover在二维码的位置，还是会弹出，可见scale真实的绘画位置是原来的位置，变成0只是缩小了而已，其他位置不变

绝对路径：

引入组件尽量用@这种，而不是用../这中，因为有可能将组件整体移动到另一个组件里，这时候相对路径就会出错

重要的样式问题

　　组件的宽度由谁决定，假设由a组件，引入了b组件和c组件和d组件。如果实现两侧固定中间随页面宽度放缩，谁决定款？

后来我发现，把组件b,c,d的宽度都设置成百分百。在a中可以控制bcd的最外层宽度。或者定义一个插槽组件，引入bcd分别放到三个插槽中，在插槽组件中规定宽度，然后将插槽组件引入a。

 引入静态资源

比如：img的src，两种方式：

　　1.直接引入‘@/assets/loading.svg’，这中方式，webpack会直接处理；

　　2.将资源作为模块引入：

　　import loading from '@/assets/loading.svg'，将资源作为data，img标签中:src='loading'

以下两种方式都可以。

<template>
  <!-- <img class="loading-container" :src='loading' /> -->
  <img class="loading-container" src='@/assets/loading.svg' />

</template>

<script>
// import loading from '@/assets/loading.svg'
export default {
  data(){
    return{
      // loading
    }
  }
};

静态资源的assets文件夹里的文件，经过npm run build命令，都会被打包到dist目录下的img目录的内容

无论以上两种方式，都能够经过webpack打包，生成真实的路径，并不出现错误，assets目录会消失。

 注意： 动态引入静态资源如果直接从data中引入会出错

如果以下方式动态引入静态资源

<template>
  <img class="loading-container" :src='loading' />
  <!-- <img class="loading-container" src='@/assets/loading.svg' /> -->

</template>

<script>
// import loading from '@/assets/loading.svg'
export default {
  data(){
    return{
      // loading
      loading: '@/assets/loading.svg'//这个loading是动态引入的
    }
  }
};

此时，:src=xxx是一个变量，是动态内容，分析模板时候，webpack分析不出来，只是知道，src来自于一个变量，并不知道这个变量的值是什么，没法进行分析。如果有必要用值这种，可以用第二种方式，利用fileloade，先 import 进来img，这个img就是打包好的资源了，再把资源的值给data的内容。