Vue学习day_03

普通组件的注册

局部注册:

创建一个components的文件夹

在里面写上对应的.vue文件

在对应的vue里面写上对应的3部分 

template写上对应的核心代码 盒子等

style 写上对应的css修饰

在App.vue里面进行引用 import 导包 格式是 import 起个名字 from '位置'

在写一个components{写上组件名:组件对象},二者要是一样的话,可以简写为组件对象

运行的结果:

组件：

组件的样式冲突scoped 

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

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

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

scoped的原理:

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

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

data是一个函数

data必须要是一个函数 要加一个return

 组件通信

组件关系:

组件通信解决方案:

父子通信流程图:

父->子:
代码演示:

子->父

代码演示:

小结:

注意：

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

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

我甚至可以这样写

代码的演示:

子里面的代码:

父里面的代码:

prop:

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

2:非空校验:

3:默认值:

4:自定义校验:

prop和data的区别：

共同点:都可以给组件提供数据

区别:

data数据是自己写的->随便改

prop的数据是外部的->不能随便改 要遵循 单向数据流

谁的数据谁负责

代码例子：

你要是子修改父的值的话 就会报错 他不希望你去修改

要是想改的话 就只能让父去修改，意思就是 谁的数据谁去修改

非父子通信event bus 事件总线￥on

事件总线程(扩展):

BaseA的代码：发进监听一下 当进页面之后就开始监听 这个A是接收的 因此就是Bus.$on('和另一个绑定的暗号', 做出的反应)

BaseB的代码：触发点击按钮之后做出clickSend这个函数 发送用的是Bus.$on(暗号， 发送的信息是怎么，到回来那一边会接收到)，一对多的关系

非父子关系通信provid&inject 

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

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

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

provide() {

return {共享的数据}

}

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

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

那么发生的就是

provide() {

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