Vue的Props实例配置详解

目录
  • 1、Prop 的大小写
  • 2、Prop 类型
  • 3、Prop验证
  • 4、传递静态|动态 Prop
  • 5、修改Prop数据

适用于:父子组件通信。

  • 如果父组件给子组件传递(函数)数据:本质是子组件给父组件传递数据;
  • 如果父组件给子组件传递的(非函数)数据:本质就是父组件给子组件传递数据。

路由组件也可以传递 props数据。

1、Prop 的大小写

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

子组件接收数据:

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase (驼峰命名法)
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

父组件传数据:

<!-- 在 HTML 中是 kebab-case 短横线分隔命名 -->
<blog-post post-title="hello"></blog-post>

2、Prop 类型

子组件指定(限制)父组件传入的Prop的值的类型。当子组件接收到错误的类型时从浏览器的 JavaScript 控制台提示用户。

// 接收数据并对数据进行类型限制
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

不限制Prop类型是这样写:

// 简单的声明接收(不能声明不传过来的数据)
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

3、Prop验证

在子组件定制接收的 prop 的验证方式,可以为 props 中的值提供一个带有验证需求的对象。如果有一个需求未满足,则 Vue 会在浏览器控制台中警告。

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      // propC的类型
      type: String,
      // 设置 propC 必须传递过来
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      // propD可传可不传,不传则值默认为100
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

4、传递静态|动态 Prop

传入一个字符串

传静态值:

<blog-post title="hello"></blog-post>

prop 通过 v-bind 动态赋值:

<!-- 动态赋予一个变量的值,该变量值post.title是字符串 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 ,post.title和post.author值是字符串-->
<blog-post
  v-bind:title="post.title + ' and ' + post.author"
></blog-post>
......
data() {
	return {
		post: { title:"aaa", author:"bbb" },
	}
}

以上传入的值都是字符串类型的,但任何类型的值都可以传给 prop,如:

传入一个数字

<!-- 即便 `42` 是静态的,仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

传入一个布尔值

<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的,仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个数组

<!-- 即便数组是静态的,仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></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>

传入一个对象的所有 property

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

5、修改Prop数据

若想对接收的prop数据进行修改,则需要在data中重新定义,不能直接对prop修改,即this.postTitle = "hhh"会报错。

<h3>{{ postTitle }}</h3>
<h3>{{ myTitle }}</h3>
<button @click="xiu"></button>
......
  // 在 js 中是 camelCase 驼峰命名法
  props: ['postTitle'],

  // 若想对接收的prop数据进行修改,则需要在data中重新定义,不能直接对prop修改,即this.postTitle = "hhh"会报错。
  ......
  data() {
	 return {
		myTitle: this.postTitle,
	}
  },
  methods: {
      xiu() {
          this.myTitle = "hhh";
      }
  }

注意:也可以不写:props: ['postTitle']来接收,因为this.$attrs中有 传来的数据postTitle ,可以直接使用。但是我们一般不这样写。因为不能限制类型,写着麻烦等。

当接收props: ['postTitle']时,this.$attrs中就不存在 传来的数据postTitle 了。

到此这篇关于Vue的Props实例配置详解的文章就介绍到这了,更多相关Vue Props内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue子组件内的props对象参数配置方法

    目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi

  • Vue的props配置项详解

    简介 主要介绍props配置项的概念,使用等. props的作用是用来接收父组件中传过来的数据. 编写步骤有两个: 子组件使用props配置项进行属性的接收. 父组件使用子组件时以组件标签属性的形式进行数据的传递. 子组件使用props配置项进行属性的接收的形式有三种: 第一种:简单模式. main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.prod

  • Vue之props 配置详解

    <template> <div class="demo"> <h1>{{ msg}}</h1> <h2>学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> <h2>学生的年龄:{{myage+1}}</h2> <button @click="changeAge">点我修改数据</button>

  • Vue路由组件通过props配置传参的实现

    目录 一.基于params参数传递 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 二.基于Query和params参数传递(通用) 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 本文主要介绍了 Vue路由组件通过props配置传参的实现,分享给大家,具体如下: 一.基于params参数传递 1.index.js

  • vuejs路由的传参及路由props配置详解

    目录 前言 方式1-使用query方式 命名路由 方式2-路由的params参数 query与params的区别 路由的props配置 路由配置的布尔模式 路由配置的对象模式 路由配置函数模式 总结 前言 在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻 下面介绍一下Vue中的路由传参以及路由的prps配置 方式1-使用query方式 这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一

  • Vue的Props实例配置详解

    目录 1.Prop 的大小写 2.Prop 类型 3.Prop验证 4.传递静态|动态 Prop 5.修改Prop数据 适用于:父子组件通信. 如果父组件给子组件传递(函数)数据:本质是子组件给父组件传递数据: 如果父组件给子组件传递的(非函数)数据:本质就是父组件给子组件传递数据. 路由组件也可以传递 props数据. 1.Prop 的大小写 HTML 中的 属性名大小写不敏感,浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • 通过GASP让vue实现动态效果实例代码详解

    单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

  • Vue中props的使用详解

    props属性是父子组件之间的通信桥梁.何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件.我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父组件的数据传给子组件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props的测试</titl

  • React和Vue的props验证示例详解

    目录 React中的props校验 react中单一类型校验器 设定属性类型和默认值 设置必需属性 react中组合类型校验器 PropTypes.oneOfType PropTypes.arrayOf PropTypes.objectOf PropTypes.shape PropTypes.node vue数据验证:通过变量名:具体类型的方法 vue数据验证:带有默认值的方式验证 通过required设置必须属性 多种类型中的一种 对象数组验证,并且数组元素是特定属性的对象 自定义验证函数 V

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • vue.config.js常用配置详解

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =

  • vue px转rem配置详解

    目录 方法一 一.配置与安装步骤: 方法二 方法三 总结 方法一 一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.do

  • vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

    在开发过程中发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理. 原因是 BmPolyline 文档中虽然有 icons 属性,但是对应的源文件中并没有props接收 icons 最初的开发思路: 根据 vue-baidu-map 折线组件的官方文档,在vue中通过Prop,为 BmPolyline 组件传递一个 icons 数组,数组的元素必须为 IconSequence 类的实例对象. 而 IconSequence 类的实例对象则是在 Baid

  • Vue组件化(ref,props, mixin,.插件)详解

    目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo

随机推荐