Vue学习day_03

案例:
一个大的App里面包括着2个盒子 BaseOne BaseTwo 这两个盒子 我单独给BaseOne加了样式之后 其他的盒子也受到了影响

默认的style样式 会作用到全局 因此我们称他为全局样式

加上scoped 之后 之后作用于当前组件 我们称他为局部样式

scoped的原理:

1.给当前组件模板的所有元素 都会被加上一个自定义属性 data-v-hash值 就可以区分不同的组件

2.css选择器被自动处理 添加上了属性选择器

data是一个函数

组件关系:

组件通信解决方案:

父子通信流程图:

父->子:
代码演示:

子->父

代码演示:

小结:

注意：

子传父的时候， 函数需要加引号

父在子这里@的是子传进来那个，意思就是，当我发现子传进来这个事件的时候，我要做出什么反应，可以写函数，也可以写其他

我甚至可以这样写

代码的演示:

子里面的代码:

父里面的代码:

prop:

props校验
1:类型校验(最常用的):

2:非空校验:

3:默认值:

4:自定义校验:

prop和data的区别：

修改的时候 要是简单类型的话 就是非响应的 意思就是祖宗发生了改变 但是子孙没接收到改变之后的数据变化

要是复杂类型的话 就是响应的 意思就是 你变我也变

共享的方法是：
祖宗里面写的是：

provide() {

return {共享的数据}

}

子孙里面写的是接受数据 inject:[]

比如接收的是 color， inject:['color']

那么发生的就是

provide() {

return {color: this.color, ......}
}