美文网首页
(Vue Props)Vue 中的属性

(Vue Props)Vue 中的属性

作者: 别点了填写不了昵称 | 来源:发表于2020-03-21 10:05 被阅读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元素上。
这里有几点注意事项:

  1. 注意Vue.component的声明位置,也就是组件的注册方式,我这里是全局注册,你们也可以观看官方文档进行仔细阅读。
  2. 这里我们声明props的时候注意遵循html的命名风格。html属性命名是全小写,不用-链接,也不用驼峰。
  3. 注意我们这里声明的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 中的属性

      本文链接:https://www.haomeiwen.com/subject/vbzeyhtx.html