您的位置：首页 > 产品设计 > UI/UE

vue 使用局部组件

2018-01-30 00:00 239 查看

局部组件的简单使用

在局部组件的属性中可以设置校验器，对父组件传递过来的值进行验证，避免参数错误

由于子组件不能修改父组件传递过来的值，可以接受后，将该值变为自己的数据，然后使用这个数据即可

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>

<body>
<div id="app">
<my-component :a='1234'></my-component>
</div>
<script>
// 局部组件

var myComponent = Vue.extend({
template: '<div>This is my first component!</div>',
props: {
// 属性名不能和data中的数据重复
// 属性的校验 出错只警告，不中断当前代码的执行
a: {
type: [String, Function, Object, Array, Number, Boolean],
// default:0,  // 默认值
required: true, // 是否必须，与default 冲突
validator(val) { // 验证 函数 ，参数是传递的属性值,可以作校验器
console.log(val, typeof(val)) // 1234,Number
return val > 300 //成功返回true，失败返回false
}
}
}

})

new Vue({
el: '#app',
components: {
// 将myComponent组件注册到Vue实例下
'my-component': myComponent
}
});
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

vue 使用 局部组件

vue 使用局部组件