Vue定义组件和生命周期函数及实例演示！

Posted 2022-07-03 lishixiang-007

定义全局组件
Vue.component("name",...)

定义局部组件
let Com = ....

new Vue(
data : ...,
...,
components :
Name : Com

)

定义组件时 对象内的属性
data : 数据模型(除了初始化 该属性必须是函数类型)
methods : 封装方法(用于给模板调用)
computed : 计算属性
watch : 监听某个数据模型的变化(默认只能监听基本数据类型,准确的来说应该是只能监听到引用的变化)
props : 用于接收父级传递进来的参数
components : 挂载子组件
生命周期函数: xxx
filters : 挂载局部过滤器

 

生命周期函数
四大时期: 实例化 加载期 更新期 卸载期
每个时期分之前和之后
之前的套路是前面加 before
之后的套路时过去时(加ed)

具体函数名如下:
beforeCreate
created

beforeMount
mounted

beforeUpdate
updated

beforeDestroy
destroyed

props的类型验证
无验证: props:["username"]
单纯类型验证: props:
username : String

多条件类型验证:
props :
username :
type : String,
required : true, //必填
default : "zhuiszhu", //默认值
validator : function(value) //自定义验证规则
if()
return true //验证通过
else
throw new Err("错误原因") //抛出验证异常

//或者 return false 该种方式也可以使验证不通过 只是无法具体看到不通过的原因 故推荐使用上列抛异常的方式