1、props
props 可以是数组或对象,用于接收来自父组件的数据。对象允许配置高级选项,如类型检测、自定义验证和设置默认值。基于对象的语法使用以下选项:
- type:
可以是原生构造函数中的一种、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。 - default: any
为该 prop 指定一个默认值。对象或数组的默认值必须从一个工厂函数返回。 - required: Boolean
定义该 prop 是否是必填项。在非生产环境中,如果这个值为 true 且该 prop 没有被传入的,则一个控制台警告将会被抛出。 - validator: Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 false 的值 (也就是验证失败),一个控制台警告将会被抛出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<prop-simple :msg="msg"></prop-simple>
<prop-advanced :age="age"></prop-advanced>
</div>
<script>
Vue.component("prop-simple", {
template: "<p> simple data -- {{ msg }} </p>",
// 普通传值
props: ['msg']
})
Vue.component("prop-advanced", {
template: "<p> advanced data -- {{ age }} </p>",
props: {
// 复杂验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
var vm = new Vue({
el: "#app",
data: {
msg: "testMsg",
// 传入正确数据
age: 123
}
})
</script>
</body>
</html>
注意,Vue 只有使用开发版本时,才会有警告信息(vue.js 开发版本)!
- 类型错误:age: ‘123’
- 验证失败:age: -1
- 组件不传值: ‘<prop-advanced></prop-advanced>’
2、propsData
创建实例时传递 props,主要作用是方便测试。propsData 在实际开发中使用的并不多,用在全局扩展时进行传递数据,主要搭配 Vue.extend 使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var propData_simple = Vue.extend({
template: "<p> simple data -- {{ msg }} </p>",
props: ['msg']
});
// 传入测试数据和测试元素
new propData_simple({
propsData: {
msg: "testMsg"
}
}).$mount('#app')
</script>
</body>
</html>
3、watch
一个对象,键是需要观察的表达式,值是对应回调函数,值也可以是方法名,或者包含选项的对象。当监听的数据变化时,就会调用对应的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
msg:<input type="text" v-model="msg">
<hr/>
obj.id:<input type="text" v-model="obj.id">
obj.name:<input type="text" v-model="obj.name">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "testMsg",
obj: {
id: "001",
name: "Tom"
}
},
watch: {
// 1、值为函数
// 可选参数 newVal 新值
// 可选参数 oldVal 原值
msg: function(newVal, oldVal){
console.log("newVal -- " + newVal + ", oldVal -- " + oldVal)
},
// 2、值为包含选项的对象
obj: {
// 可传入方法名
handler: f,
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
deep: true,
// 该回调将会在侦听开始之后被立即调用
immediate: true
}
}
})
function f(){
console.log("obj value change")
}
</script>
</body>
</html>
4、computed
计算属性将被混入到 Vue 实例中,可用于对 Vue 实例的 data 数据做简单处理,并当做 data 的属性值使用。在 getter 和 setter 中,可以在获取或设置 data 数据时,做一层过滤处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 1
},
computed: {
// 仅读取
numDouble: function () {
return this.num * 2
},
// 读取和设置
numPlus: {
get: function () {
return this.num + 1
},
// v 是外部设置的值
set: function (v) {
this.num = v - 1
}
}
}
})
// num原值 1
console.log(vm.num)
// 对num做简单处理后的新属性值 num * 2 = 2
console.log(vm.numDouble)
// numPlus获取过滤 num + 1 = 2
console.log(vm.numPlus)
// numPlus设置过滤 num = 3 - 1 = 2
vm.numPlus = 3
// num新值 2
console.log(vm.num)
</script>
</body>
</html>
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。
参考链接: