（Vue Props）Vue 中的属性

2020-03-21 本文已影响0人别点了填写不了昵称

前提

看这篇文章之前希望大家可以有 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 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用一下选项：
1. type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Data、Function、Symbol、任何自定义的构造函数、或上述内容组成的数组。会检查一个prop是否是给定的类型，否则抛出警告。
2. default：any
  为该prop指定一个默认值。如果该prop没有传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
3. required：Boolean
  定义该prop是否是必填项。是非生产环境中，如果这个值truthy且该prop没有被传入，则会被控制台抛出一个警告。
4. 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>

输出结果

（Vue Props）Vue 中的属性

前提

概述

猜你喜欢

热点阅读