前提
看这篇文章之前希望大家可以有 VueComponent 的基础。此篇文章为博主自学的时候做的一些总结。如果有什么错误希望大家指正。
概述
props是vuejs中对于html 中DOM属性的声明。我们所声明的props都将作为DOM的属性进行插入到HTML元素中。这里的id就可以当作vue的一个props 它的类型是String。
<html>
<head>
</head>
<body>
<div id ="root"></div>
</body>
</html>
我们可以在官网上得到如下解释
-
类型：Array<string> | Object
-
详细：
props 可以是数组或对象，用于接受来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。你可以基于对象的语法使用一下选项：
- type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Data、Function、Symbol、任何自定义的构造函数、或上述内容组成的数组。会检查一个prop是否是给定的类型，否则抛出警告。
- default：any
为该prop指定一个默认值。如果该prop没有传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 - required：Boolean
定义该prop是否是必填项。是非生产环境中，如果这个值truthy且该prop没有被传入，则会被控制台抛出一个警告。 - validator：Function
自定义验证函数会将该prop的值作为唯一的参数带入。在非生产环境下，如果该函数返回一个falsy的值（也就是验证失败），控制台将会抛出一个警告。
可以看出，我们可以对这些属性做一个定制。也可以对定制的属性进行验证，设置默认值，同时也可以支持函数（事件）。
我们可以根据根据官方文档的指引，来对props来进行编写代码加深记忆。
这里我定义了一个 hello 的组件，并在组件里进行了props定义，然后将定义的props显示到DOM元素上。
这里有几点注意事项：
- 注意Vue.component的声明位置，也就是组件的注册方式，我这里是全局注册，你们也可以观看官方文档进行仔细阅读。
- 这里我们声明props的时候注意遵循html的命名风格。html属性命名是全小写，不用-链接，也不用驼峰。
- 注意我们这里声明的props是直接使用数组进行固定化赋值，在生产环境下，这样以后修改起来代码的耦合性会非常高。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<hello name="world"></hello>
</div>
</body>
<script>
Vue.component('hello', {
props: ['name'],
template: "<h1>Hello {{name}}</h1>"
})
var vue = new Vue({
el: "#app"
})
</script>
</html>
输出结果
网友评论