VUE 组件

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、VUE 组件 ---组件注册
  • 二、VUE--组件 props
  • 三、插槽
  • 四、深层组件传值
  • 五、动态组件


前言

提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

一、VUE 组件 —组件注册

1、组件注册有两种方式

  1. 全局注册
    将组件注册到跟实例(跟组件)上,这个组件就是全局组件。全局组件可以被任意组件去使用
    例:
    VUE 组件_第1张图片
  2. 局部注册
    将组件注册到某个组件的内部,通过components属性完成,局部组件只能在当前的组件使用
    例:
    VUE 组件_第2张图片
  3. 组件中的一些属性
    1-- 组件名
    组件名称有两种风格:
    kebab-case (my-button)(推荐)
    KebabCase (My-Button)
    2-- 组件中的第二个参数的属性
  • template 定义组件的结构样式
    注意:组件可以有多个根节点,但是,尽量就一个
  • 剩下的属性和VUE实例中可以写的属性一模一样。而且,每个组件都是一个独立的作用域,都会维护自己的状态,不用担心冲突

二、VUE–组件 props

组件提供一个props属性,专门用来接受在使用组件时,写在组件身上的属性(标签属性)的属性(组件内容属性)

  1. 基本使用方式
  <my-button></my-button>

注册组件
例:
VUE 组件_第3张图片

  1. 关于props的数据流向问题
  • 通过props可以完成父组件传值到子组件。
    并且这个传值遵循数据的单向流通原则:父组件的值改变,子组件中的值改变
  • props 只能读,不能改
  • props 用处
    - 动态改变组件的某些值
    - 可以做为初始值使用
    - 可以作为依赖属性去使用
  • 关于props传递引用类型数据(对象/数组)的时候
    - 如果在子组件中修改引用类型的某个属性,是允许修改的,因为改某个属性的时候,并没有修改这个指针
    - 所以,传递引用类型的时候,容易造成数据流向的不确定性(不确定性是因为掌握的不够透彻),尽量避免去传递引用类型
  1. 关于props的约束
  • 类型约束
    - String Number Array Object Boolean
props:{
	bn:[String,Number],
	info:Object
} 
  • 属性必填验证(此验证不是验证属性值必填,是验证属性必填)
props:{
	bn:{
		type:null //如果类型上允许任何类型通过,则写null即可
	}
}
  • 默认值
    VUE 组件_第4张图片
    效果:
    在这里插入图片描述

  • 自定义验证规则

VUE 组件_第5张图片

4.非props属性

  • 什么是?
    - 没有在组件内通过props接受的属性 -----即非props属性
  • 特性
    - 前提:组件必须只有一个根节点
    - 非props属性会自动成为根节点的属性,这种现象叫属性继承
  • 经常将哪些属性做成非props属性
    - class style id
  • 非props属性可以被禁止继承
    - 如何使用
    在组件内部填写一个属性:inheritAttrs:false
    - 什么情况下禁止继承?
    让非props属性在非根节点生效
    - 在vue实例中,有一个属性:$attrs,这个属性的作用就是接受所有非props属性
    -

// 此对象的属性会自动成为标签的属性

  1. 自定义事件
  • 自定义事件使用步骤
    - A、 给组件绑定自定义事件

    如果使用一段内联逻辑
<my-thumbnail @myclick="count+=$event.step"></my-thumbnail>

$event 就代表你传递过来的实参

B. 自定义事件会传输到子组件内部,需要使用 emits接受
emits:[‘myclick’]
C. 在子组件内部的某个节点上绑定传统事件,触发自定义事件
this.$emit(‘myclick’, {msg:‘hello’})

  • 自定义事件可以完成子组件传值到父组件
  1. 组件中的双向绑定
  • 当你在组件上使用v-model时,vue自动向你的子组件发送了props(modelValue)属性emits(update:moveValue)自定义事件。
    - 发送的props属性是:modelValue (v-model=‘值’)
    - 发送的emits事件是:update:modelValue
  • 自定义属性的名称是可以修改的
    -
    - 子组件
props: {
		age:null
	},
	emits:["update:age"]
  • 修饰符
    • 当你给组件的v-model使用了修饰符之后,那么,将会传递一个对象到子组件之中 – modelModifiers;
      此属性是由你的修饰符组成(值为true)的对象!
      - 对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + “Modifiers”
      - 例:

v-model:age.number = ‘age’; props:[age,ageModifiers]

三、插槽

  1. 在子组件中开辟插槽
    例:
app.component('my-btn',{
	template:`
		<button class="btn btn-primary">
			<slot></slot>
		</button>
	`
})
  1. 插入内容
  • 可以是字符串
<my-btn>登录</my-btn>
<my-btn>注册</my-btn>
<my-btn>提交</my-btn>
<my-btn>充值</my-btn>
  • 可以是dom
<my-btn>
	<b>登录</b>
</my-btn>
  • 可以是组件
<my-btn>
	<my-icon></my-icon>
	搜索	
</my-btn>
  1. 插槽默认值
app.component('my-btn',{
	template:`
		<button class="btn btn-primary">
			<slot>按钮</slot>
		</button>
	`
})
  1. 具名插槽
    如果组件的结构比较复杂,可以插入内容的位置比较多,这时,就需要具名插槽了
  • 带有名字的插槽
<slot name="名字"></slot>
  • 插值到具体位置
<template v-slot:名字>你要插的内容</template>
  • v-slot指令的简写
<template #名字>你要插的内容</template>

四、深层组件传值

  • 在祖父级组件上提供数据:
provide:{
		属性:,
		....
	}
  • 在儿孙级注入数据:
inject:[属性...]

五、动态组件

component is=‘组件名称’>

  • 如果要缓存组件呢?
<keep-alive>
	<component :is="show"></component>
</keep-alive>

你可能感兴趣的:(vue.js,前端,javascript)