组件的三大组成部分 - 注意点说明

 组件的样式冲突 scoped

默认情况:写在组件中的样式会 全局生效 -> 因此很容易造成多个组件之间的样式冲突问题
1.全局样式: 默认组件中的样式会作用到全局

2.局部样式: 可以给组件加上 scoped 属性,可以让样式只作用于当前组件

scoped原理?
1. 当前组件内标签都被添加 data-v-hash值 的属性

2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到

<template><div>BaseOne</div>
</template><style scoped>
/* 
1. 默认的style样式,会作用于全局 -> 全局样式
2. 加上 scoped属性的style样式,只会作用于当前组件 -> 局部样式组件应该有着自己独立的样式,推荐加上scoped(原理)
-------------------------------------
scoped原理
1. 给当前组件模板的所有元素,都会被添加上一个自定义属性data-v-hash值data-v-57t667d6 区分开不同的组件
2. css选择器后面,被自动处理,添加上了属性选择器div[data-v-57t667d6]
*/
div{border: 3px solid blue;margin: 30px;}</style>

data 是一个函数

一个组件的 data 选项必须是一个函数 -> 保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例, 都会执行一次data函数,得到一个新的对象

// 子组件<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></template><script>export default {// data必须是一个函数 -> 保证每个组件实例,维护独立的一个数据对象data(){return {count:999}}}</script><style>.base-count {margin: 20px;}</style>

// 父组件<template><div ><BaseOne></BaseOne><BaseOne></BaseOne><BaseOne></BaseOne></div>
</template><script>import BaseOne from './components/BaseOne.vue'
export default {components:{BaseOne}}</script><style></style>