[路飞]_Vue-基础Api

王蛋蛋的私房菜
288 阅读5分钟

组件注册

组件的概念

组件概念图.png

根组件

我们创建的Vue实例就是vue的根组件，这里需要注意，根组件中如果要写template会取代el所代替的内容，但写了template不能省掉el

image.png

image.png

组件的全局注册

Vue.component('组件名',{})，{}内部采用的是vue语法。不需要在vue实例中注册。 注意：全局组件必须写在vue实例上方，不然渲染不出来。

image.png

组件的局部注册

组件名 = {}， {}内部采用的是vue的语法，定义后需要在根组件中注册。

image.png

总结

Vue中组件必须要有一个根节点，除了根组件之外，其他组件内的data必须以function形式定义，因为全局或局部组件是会被外界调用的，如果以data对象的形式，对象是个引用类型，一个地方的值改变会影响到所有引用该组件的值得变化，所以要以function的形式rutern一个全新的值来保证组件重复调用时互不影响，由于根组件（new Vue）在整个程序中只出现一次所以根组件中的data可以是对象的形式

组件的生命周期

生命周期的组成及触发条件

组件的生命周期由8个生命周期函数组成，分别是beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

image.png 页面初始化时会依次执行beforeCreate，created，beforeMount，mounted

image.png

image.png

当页面内容发生改变时会触发beforeUpdate和updated，我们点击按钮让数量增加达到更新页面的效果

image.png 我们利用v-if可以隐藏组件的特性来触发组件销毁的钩子函数

image.png

image.png

父子组件中各自生命周期执行顺序

当组件中嵌套子组件时，父组件需要等到所有子组件都挂在完成后才执行mounted

image.png

image.png

父子组件各自视图更新时，会各自触发各自的更新钩子函数，互不影响

image.png

image.png 当父组件销毁时，子组件一并销毁，当所有子组件完成销毁后父组件才执行销毁

image.png

组件间传值

组件间传值使用props，可以以数组和对象的形式

image.png 可以通过type定义值得类型，required规定是否是必传，default定义默认的值，validator方法实现验证逻辑。 Vue中组件间通信都是单向的，这里传入的title是不可以被更改的

image.png

image.png

自定义事件

$emit

子组件想要通知父组件做事情可通过$emit方法进行通知，包括子组件在用完父组件传过来的值后想要修改传值的值，也要采用这种方式，不可以在子组件中对父组件的传值进行修改，因为vue中值得传递均为单向的

image.png

image.png

image.png

v-model方式

v-model不仅可以用于表单元素中，同样可以用于组件传值中，这样写同样可节省大量逻辑与命名问题

image.png 如果不想用v-model默认的命名，也可以自定义命名

image.png 注意，，v-model只能处理单个prop

sync方式

采用sync方式可以对多个prop进行处理

image.png 注意，在vue3中v-model和sync会合并成一个

插槽

后背内容

vue的组件在引用时，如果想在外部添加新的内容，是不可以直接在组件的标签间添加的

image.png

image.png

我们需要用到组件插槽去显示外部添加的内容，slot为组件插槽，外部需要插入的内容在此进行显示

image.png

image.png

具名插槽

具名插槽就是让插槽具有指向性，唯一性，通过name将不同插槽进行唯一性命名，在组件中引用时，通过template标签，用v-slot:name（简写为 #name）形式指定输出的插槽位置，

image.png

作用域插槽

在组件中定义的数据无法在外部调用组件中直接引用输出

image.png 需要通过数据绑定形式，在外部template标签中以v-slot="数据"的形式扩充其作用域，如果是对象或数组的数据，可以以{数据}的形式进行解构

image.png

image.png

逻辑的复用性

vue中除了可通过插槽的方式达到功能复用的效果，还可以通过mixin的方式进行复用，mixin的写法同普通vue对象内容写法相同

选项合并，局部混入

使用mixin进行合并具有三个特点

组件数据优先

image.png

同名钩子合并成数组，混入对象的钩子先调用

image.png

值为对象的选项，合并为同一个对象，冲突时取组件对象的值

image.png

全局混入

全局混入会影响到每一个组件，全局混入与局部混入的写法类似于组件的全局注册和局部注册 image.png 混入具有明显的缺点，引用多个混入不知道调用的值的来源，并且如果多个混入中存在同名变量会导致命名冲突问题 image.png

动态组件

component

通过点击导航栏切换不同组件页面，传统方式 image.png vue中用component标签来控制组件的变换，is用于绑定指定需要显示的组件 image.png 其中is的绑定方式还以以字典的形式 image.png

keep-alive

用component调用组件时，当组件进行切换，上一个组件会被销毁 image.png image.png 想要在切换组件时保持组件内容不变，需要在组件外部用keep-alive标签包裹，此时做组件间切换不会导致组件的销毁并保持原组件页面状态 image.png keep-alive可以指定包裹的组件中哪些组件可以进行缓存（include），或除哪些组件外可进行缓存（exclude） image.png image.png keep-alive存在两个生命周期函数，activated和deactivated，分别在组件激活和组件销毁或切换时触发，且仅当组件用keep-alive包裹时生效 image.png

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。 image.png 这里的异步组件工厂函数也可以返回一个options的对象形式 image.png

avatar
文章
阅读
粉丝