持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

复习并创建一个down组件

我们先复习一下vue-cli组件的创建

接下来演示我们也要用到这个down组件

先看一下我们的上组件代码

<template>
    <div class="upStyle">
        {{updata}}
    </div>
  </template>
  
  <style lang="less">
    .upStyle {
        width: 300px;
        height: 300px;
        background-color: greenyellow;
    }
  </style>
  
  <script>
    export default {
        data(){
            return {
                updata:"这是上组件"
            }
        }
    }
  </script>

参考上组件，我们来创建一个下组件

<template>
    
</template>

<style>

</style>

<script>

</script>

之前的文章已经介绍过这三个标签的作用及用法了，这里就不多赘述了

然后我们可以在<template></template>中写入html，在<style></style>中写入样式，最后在<script></script>中写入js,vue等。

写完的如下:

<template>
    <div class="downStyle">
        {{downdata}}
    </div>
  </template>
  
  <style lang="less">
    .downStyle {
        width: 300px;
        height: 300px;
        background-color: rebeccapurple;
    }
  </style>
  
  <script>
    export default {
        data(){
            return {
                downdata:"这是下组件"
            }
        }
    }
  </script>

接下来我们在App.vue中完成注册

App.vue代码

<template>
  <div>
    <up></up>
    <down></down>
  </div>
</template>

<style lang="less">
  div {
    height: auto;
    width: auto;
  }
</style>

<script>
import  up  from "@/components/up.vue";
import  down  from '@/components/down.vue';
export default {
  components:{
    up,down
  }
}
</script>

我们已经完成了这两个组件的导入，注册和使用。

全局组件的注册及使用

接下来我们来做一个全局组件的小Demo

终端运行npm run serve

出现上面样式

接下来我们来注册全局组件

import Vue from 'vue'
import App from './App.vue'
import all from '@/components/all.vue';

Vue.component('MyCount',all);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

打开main.js文件，输入上述代码，完成全局组件的注册

解析一下，核心是通过

import all from '@/components/all.vue';

Vue.component('MyCount',all);

完成注册

接下来我们在上组件中使用一下这个全局组件

<template>
    <div class="upStyle">
        {{updata}}
        <MyCount></MyCount>来了
    </div>
  </template>
  
  <style lang="less">
    .upStyle {
        width: 300px;
        height: 300px;
        background-color: greenyellow;
    }
  </style>
  
  <script>
    export default {
        data(){
            return {
                updata:"这是上组件"
            }
        }
    }
  </script>

上面是up.vue中全部代码

接下来我们保存并刷新，发现页面变成了如下的样子

全局组件已经在上组件完成了使用，我们同样也可以在下组件中不导入注册完成使用，极大程度上简化了开发和维护的成本

随之而来的问题

随之而来的问题:

我们下方组件并没有引入这个全局组件，但是其中的div还是随着全局组件的引入而使其中的字体颜色发生了改变，那么这是为什么呢？

我们明明没有引入这个下组件呀。

样式冲突及解决

发生这个问题的原因是样式冲突，我们vue-cli的核心就是将组件渲染到index.html中指定的div区域中去，这就造成了一个页面中引入的组件中的style可能会发生冲突。

那么我们如何解决呢？

我们在<style></style>中加入scoped属性，就可以解决样式冲突，这就是我们解决的方案，

改变后的all.vue如下

<template>
    <div>
        <div class="data">
            {{allData}}
        </div>
    </div>
</template>

<style scoped>
    div {
        color: brown;
    }
    .data {
        width: 60px;
        height: 60px;
    }
</style>

<script>
export default {
    data(){
        return {
            allData:"All组件"
        }
    }
}
</script>

加入scoped后可以解决样式冲突问题，明天的文章我给大家带来scoped的底层的原理。