Vue基础(组件基础)

Vue组件

组件的特点

• 每个组件就是一个自定义标签
• 可复用性
• 方便维护
• 方便拆分
• 每一个VUE组件都是一个独立的个体(独立的vue实例),作用域隔离(互不干扰),有完整的生命周期,有自己的响应式数据和各种方法(事件)

• 能够实现组件的嵌套:需要掌握组件之间的信息通信

组件命名规范

• 组件名字单词首字母大写 PasalCase
• 以横线作为分隔符 kabab-case
• 不能使用内置的标签名作为组件名称
• 调取组件的时候,会把所有组件的单词渲染为小写
• 命名的时候尽量不要出现其他的特殊字符

调取组件的方法

• 单闭合:不符合w3c规范,调取完成后,后面的视图不识别(避免使用的)
• 双闭合:可以设置除组件规定内容外的其余内容(slot插槽)• 创建组件的时候,data必须返回一个函数,并且函数返回一个对象,不能直接写对象
• child 是Vm这个vue实例的子组件;判断组件在哪个实例中注册,就是谁的子组件;

全局组件

• 全局组件可以在任何的vm实例中使用,每一个组件都相当于一个vue的实例,当调用这个组件时,就会生成vue的生命周期,每当使用一次就会执行一遍生命周期钩子函数• 如何创建全局组件:在Vue属性上有一个component函数,执行可以创建一个组件,接收两个参数,第一个是组件的名字,第二个是组件的信息对象

局部组件

• 局部组件只能在注册的vue实例中使用该组件,不能跨组件使用,但是可以在另一个组件vue实例中再注册一次
• 如何创建局部组件:写一个组件实例,然后在vue实例的component属性中起一个属性名,属性值为组件的名字
• 组件methods中的方法的this指向了当前组件的实例

Vue组件

组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应组件即可

组件化和模块化的不同:
组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;

组件的声明

注意:组件调用全部使用短横线连接的方式!

组件的注册

vue 中,我们可以通过 new Vue 来创建一个组件,不过通常它是作为整个应用的顶层根组件存在的,我们还可以通过另外的方式来注册一个更为通用的组件

创建可复用的组件

全局组件
通过 Vue.component 注册的组件,我们称为全局组件,因为它可以在任意范围内使用

局部组件
在一个组件内部通过 components 选项注册的组件是局部组件,只能在当前 components 选项所在的组件内部使用

注意:局部注册的组件只能中当前注册的组件中使用,不能在它的子组件中使用

法一:
全局组件:位置关联下就都可以用
局部组件:仅仅当前可用

法二:
全局组件
局部组件

法三(外部定义组件)(推荐):
全局组件
局部组件

组件的数据

data

在非 new Vue 的组件中,data 必须为函数的形式,函数返回值必须是一个对象,作为组件的最终 data,这样复用不会修改别人的数据

组件的属性应用及校验

属性应用

属性在组件标签上需要使用短横线命名法,在组件中声明需要采用驼峰命名法

    <my-button button-content="按钮"></my-button>
    components:{
        'MyButton':{
            props:['buttonContent'],
            template:''
        }
    }

属性校验

props 属性除了设置为一个数组还可以设置一个对象,其中 key 是 props 名,值是一个对象,在这个对象中可以设置默认值以及对这个 props 的校验规则;

常见的校验:

  1. type: Number, // 类型校验,要求 pmsg 必须是某种类型,如果类型不对会抛出警告

  2. required: true, // 必传校验,如果不传会引发警告

  3. default: 250, // 设置默认值,如果不传的时候使用默认值
    注意:可以写成函数,返回一个对象的默认值

  4. validator(val) { // 验证器函数,有问题可以抛出异常,没有问题要 return true

     Vue.component('my-component', {
         props: {
             // 基础的类型检查(null和 undefined 会通过任何类型验证)
             propA: Number,
             //多个可能的类型
             propB: [String, Number],
             //必填的字符申
             propC: {
                 type: String,
                 required: true
             },
             // 带有默认值的数字
             PropD: {
                 type: Number,
                 default: 100
             },
             // 带有默认值的对象
             propE: {
                 type: object,
                 //对象或数组默认值必须从一个工厂函数获取
                 default: function () {
                     return { message: 'hello' }
                 }
             },
             // 自定义验证函数
             propF: {
                 validator: function (value) {
                     //这个值必须匹配下列字符串中的一个
                     return ['success', 'warning', 'danger'].indexof(value) !== -1
                 }
             }
         }
     })
    
     
     components:{
         'MyButton':{
             props:{
                 buttonContent:String,
                 arr:{
                     type:Array,
                     default:()=>([])
                 },
                 number:{
                     type:Number,
                     validator:(value)=>{
                         return typeof value == 'number'
                     }
                 },
    
             },
             template:''
         }
     }
    

批量传入数据

非prop特性

一个非 prop 特性是指:传向一个组件,但是该组件并没有相应 prop 定义的特性,这些 props 会被自动添加到组件的根元素上

template: '

//默认不接收的参数会放到这来

$attrs存储非prop特性,inheritAttrs控制vue对非prop特性默认行为
Vue基础(组件基础)_第1张图片

替换/合并已有的特性

默认情况下,非prop 特性的属性会覆盖组件根元素上同名的内容,
但是针对 styleclass 有特殊的处理,它们会合并(同名样式还是会覆盖)

禁用特性继承

如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false
我们可以通过组件的 this.$attrs 来获取这些属性

注意 inheritAttrs: false 选项不会影响 styleclass 的绑定

Vue基础(组件基础)_第2张图片

你可能感兴趣的:(Vue)