全局注册
在main.js中,new Vue之前进行全局注册
语法:Vue.component("注册名称",需要注册的组件)
私有组件
导入组件-》在components里注册-》在页面使用
props
通过props选项声明自定义属性,让外界动态提供
与data平级定义props:["属性名"] 最简单的定义方法,无法控制每个属性的类型
props:{
自定义属性名:数据类型(可以有多个类型[类型A,类型B])
}
优化
props:{
自定义属性名:配置选项{
type用来约束数据类型
type:数据类型
属性的默认值
default:1
必填项(required 与default是二选一)
required:true
}
}
props接收的值是只读的不能直接修改,解决方案将props转存到data数据里
组件之间的冲突问题
核心原理为每一个 .vue组件分配唯一的属性值
给style添加scoped属性自动分配自定义属性
生命周期
组件的创建阶段
beforeCreate:很少用有因为data数据和methods函数都不可用
created:非常重要因为此时methods函数和data数据都初始化好了 实际开 发中经常会发起Ajax请求
beforeMount:很少用将要把内存中生成好的DOM结构渲染到浏览器,但是还没渲染,浏览器没有DOM结构
mounted:要想操作DOM最早 第一次把DOM结构渲染到浏览器,用户可以看到组件了
组件的运行阶段
当组件data中的数据发生变化时会触发
beforeUpdate :执行时data数据是新的值,页面渲染是旧的值
updated:执行时data与页面都是新值
组件的销毁阶段
beforeDestroy:组件将要销毁还没开始销毁
destroyed:组件销毁完成