zoukankan      html  css  js  c++  java
  • Vue-prop

    HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

    1 Vue.component('blog-post', {
    2   // 在 JavaScript 中是 camelCase 的
    3   props: ['postTitle'],
    4   template: '<h3>{{ postTitle }}</h3>'
    5 })
    <!-- 在 HTML 中是 kebab-case 的 -->
    <blog-post post-title="hello!"></blog-post>

    到这里,我们只看到了以字符串数组形式列出的 prop:

    props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

    但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:

    props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object
    }

    传递静态或动态 Prop

    <!--像这样,你已经知道了可以像这样给 prop 传入一个静态的值:-->
    <blog-post title="My journey with Vue"></blog-post>
    你也知道 prop 可以通过 v-bind 动态赋值,例如:
    <!-- 动态赋予一个变量的值 -->
    <blog-post v-bind:title="post.title"></blog-post>
    
    <!-- 动态赋予一个复杂表达式的值 -->
    <blog-post
      v-bind:title="post.title + ' by ' + post.author.name"
    ></blog-post>

    传入一个对象

    <!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
    <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
    <blog-post
      v-bind:author="{
        name: 'Veronica',
        company: 'Veridian Dynamics'
      }"
    ></blog-post>
    
    <!-- 用一个变量进行动态赋值。-->
    <blog-post v-bind:author="post.author"></blog-post>

    如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如,对于一个给定的对象 post

    post: {
      id: 1,
      title: 'My Journey with Vue'
    }
    <blog-post v-bind="post"></blog-post>
    
    //等价于:
    <blog-post
      v-bind:id="post.id"
      v-bind:title="post.title"
    ></blog-post>

    非 Prop 的特性

    一个非 prop 特性是指传向一个组件,但是该组件并没有相应 prop 定义的特性。

    因为显式定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。

    例如,想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件,这个插件需要在其 <input> 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上:

    <bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

    然后这个 data-date-picker="activated" 特性就会自动添加到 <bootstrap-date-input> 的根元素上。

  • 相关阅读:
    在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好
    # 会员注册与登录模块
    文本文件从磁盘读取、写入
    简单的web三层架构系统【第五版】
    Nginx负载均衡中后端节点服务器健康检查的一种简单方式
    编译安装php-7.1.17及部分扩展
    wkhtmltopdf 安装过程不包含php扩展部分
    Centos6下安装中文字体
    xen 配置vm 跟随xen server一起启动
    CENTOS 升级Nodejs 到最新版本
  • 原文地址:https://www.cnblogs.com/ustc-anmin/p/10579431.html
Copyright © 2011-2022 走看看