复习并创建一个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的底层的原理。
