vue组件化开发.
- 什么是组件化开发.
- 组件时可以复用的vue实例,封装标签,样式和JS代码 vue组件分类:
- 1.页面组件
- 2.页面下的功能组件 组件化开发:一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能
封装的思想,把页面上可以重复使用的部分封装成为一个组件,从而方便项目的开发和维护
一个页面,可以拆分成一个个组件,一个个组件就是一个独立的整体,可以拥有自己的结构.样式和行为.
vue组件的封装与使用.
为什么要封装组件
- 复用.封装一次可以多次使用
- 方便维护和代码的整理.
使用步骤.
1.先定义一个组件
先创建创建一个名为MyCom的组件,并在App.vue中使用
2.在App.vue中注册组件
3.使用组件.
注意:组件的名字不能和现有的html标签名一致
在vue中存在多个组件样式名相同,从而产生出冲突的问题.
- 因为在vue中默认组件style中定义的样式是全局的,所以存在相同名字覆盖的情况,从而导致效果出不来产生冲突.我们怎么解决这个冲突呢. 局部样式:在style标签上加上scoped属性.
原理
- 在style上加入scoped属性,就会在此组件的标签上加上一个随机生成的data-v开头的属性
- 而且必须是当前组件的元素或子元素的根元素才会有这个自定义属性
- 如果在style上加上scoped,组件内的样旨在当前的vue组件生效,相反,样式就是全局的.
当然在父子组件都设置了scoped属性的情况下,父组件中怎么控制子组件中的样式,这个时候我们就需要用到.
vue组件中的深度作用选择符. /deep/属性来解决这个问题
vue组件通信.
- 怎样在组件之间做通讯?
- 因为每个组件的变量和值都是独立的=>如果想要获取对方页面中定义的变量应该怎么做呢? 我们先来看一下他们之间的关系图.
父组件传子组件通讯
- 在App.vue中导入MyCom.vue并使用,这个时候我们称App.vue这个组件为父组件,MyCom.vue组件是子组件.
- 那么我们要怎么导入并使用这个组件呢.
我们先创建一个文件夹,在里面创建一个App.vue组件和MyCom.vue组件.
1.然后在父组件中将你需要传的值自定义一个属性
2.在子组件用,用props接收这个自定义属性.我们就可以在子组件中使用父组件中的值了.
在vue中我们需要遵守单向数据流的原则.
1.在父传子的前提下,父组件的数据会发生通知子组件自动更新.
2.子组件内部,不能直接修改父组件传递过来的props (props是只读的)
意思就是父组件中的数据传过去了之后,子组件只能使用父组件传过去的数据不能修改父组件中的数据,修改之后就会报错.我们把这中现象叫做,vue中的单项数据流
- 说明:
父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址 - props的值不能重新赋值.但是引用类型子组件可以修改父组件
子组件传父组件通讯
- 什么是子组件传父组件通讯.指的是从子组件内部把数据传出来给父组件使用或者修改父组件数据 关系图.
- 父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />
- 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码 1.我们现在父元素中自定义一个事件
2.在子组件中用$emit语法来执行父元素中的函数代码.
- 好了,这就是vue中的组件与组件通讯间的用法.
总结:
父传子通讯就是在父元素中设置一个自定义属性.在子组件中用props接收.子传父就是在父组件之中自定义一个事件在子组件中用$emit语法接收就可以调用父组件中的事件了
