组件参数校验：父组件向子组件传递的内容，那子组件有权对这个内容做一些约束，这些约束就叫参数的校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件参数校验与非props特性</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- msg="hello world" 通过属性的形式，父组件向子组件传递参数 -->
<!-- 组件参数校验：父组件向子组件传递的内容，那子组件有权对这个内容做一些约束，这些约束就叫参数的校验 -->
<child msg="hello world"></child>
<!-- <child :count="12"></child> -->
<!-- <child :msg="123"></child> msg是Number类型
<child msg="123"></child> msg是字符串 -->
</div>
<script>
Vue.component('child', {
// 1 组件参数校验:子组件要求父组件传递过来的参数必须是一个字符串
// props: {
// msg: String
// },
// 2 组件参数校验:要求父组件传递过来的参数是一个字符串或者数字
// props: {
// msg: [Number, String]
// },
// 3 对象
props: {
msg: {
type: String,
required: true,
default: 'default value',
validator: function (value) {
return (value.length > 5)
}
},
},
// 4
// props: [
// 'msg'
// ],
template: '<div>{{msg}}</div>'
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
非props特性：父组件向子组件传递了props属性，但是子组件并没有声明要接收父组件传递的内容。
props特性:当父组件使用子组件的时候，通过属性向子组件传递值，恰好子组件声明了props对父组件传过来值的接收。
网友评论