【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结-Vue基础-组件基础+组件通信+组件进阶+自定义指令+插槽

vue组件:可复用的vue实例,封装,遇到重复标签,可复用的时候

                好处:复用性和灵活性,开发效率和后期可维护性

1.封装组件2.引入组件3,注册组件,4使用组件(组件名不能和内置的html名同名)

定义组件名:大驼峰/小写短横线 使用组件时,小写横杠隔开

scoped:样式只作用于当前组件

        写在组件中的样式会 '全局生效',因此很容易造成多个组件之间的样式冲突问题

               原理:当前组件内标签都被添加data-v-hash值的属性,css选择器都被添加[data-v-hash值]的属性选择器

组件通信:父传子,子传父  (遵从从父到子的单向数据流动)

父传子=>v-bind发送,通过props属性接收(props 里的变量本身只是可读的) 

子传父=>this.$emit('自定义事件名',参数1,参数2)  父:@自定义事件名='父methods函数'

配置props 校验:基础的类型检查,多个可能得类型[String,Number],必填项校验require:true,默认值default:100,自定义验证函数

v-model语法糖

        v-model本质上是value属性和input 事件的一层包装

               数据发生了变化,页面会自动变 v-bind:value    页面输入改变,数据会自动变化 v-on:input

ref和refs:获取真实DOM元素和组件对象

        给目标标签添加ref属性,恰当时机通过this$refs获取目标标签,调用组件里的属性/方法

$nextTick

        vue 更新dom是异步的 this.$nextTick(函数体):等DMO更新后,才会触发执行此方法里的函数体

dynamic动态组件:可以改变的组件

                解决多组件同一位置,切换显示的需求

                基本语法:component组件+is属性(哪个组件)<component :is='要显示的组件'>

                        修改is属性绑定的值=>切换组件

自定义指令:自己定义指令,封装dem操作,扩展额外功能 directive

 插槽

        默认插槽:组件内 <slot></slot>站位  使用组件时,夹着的地方传入标签,即可替换slot

        默认值:在slot 标签内放置内容,作为默认显示内容

        一个组件内有多处,需要外部传入标签,进行定<template  #name></template>

                给插槽绑定数据,可以传值,<template  #name='obj'><button>{{obj.aa}}</button>   </template>