VueJS组件之间通过props交互及验证的方式


Posted in Javascript onSeptember 04, 2017

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"。

父组件通过props将数据传递给子组件

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <child message="hello world!">props传递给子组件</child>
</div>

<script>
// 
Vue.component('child', {
 // 声明 props
 props: ['message'],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: '<h1>{{ message }}</h1>'
})
// 创建根实例
new Vue({
 el: '#app'
})
</script>
</body>
</html>

效果如图:

VueJS组件之间通过props交互及验证的方式

动态 props组建数据传递

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div>
   <input v-model="parentMsg">
   <br>
   <child v-bind:message="parentMsg"></child>
  </div>
</div>

<script>
// 注册
Vue.component('child', {
 // 声明 props
 props: ['message'],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
 el: '#app',
 data: {
  parentMsg: '父组件内容'
 }
})
</script>
</body>
</html>

效果如图:

VueJS组件之间通过props交互及验证的方式

 v-bind 指令将 todo 传到每一个重复的组件中

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
  <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   </ol>
</div>

<script>
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
})
new Vue({
 el: '#app',
 data: {
  sites: [
   { text: 'Runoob' },
   { text: 'Google' },
   { text: 'Taobao' }
  ]
 }
})
</script>
</body>
</html>

效果如下:

VueJS组件之间通过props交互及验证的方式

注意: props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。 

组件为 props 指定验证要求

props 是一个对象而不是字符串数组时,它包含验证要求:

JS

Vue.component('example', {
 props: {
  // 基础类型检测 (`null` 意思是任何类型都可以)
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字,有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组/对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type 也可以是一个自定义构造器,使用 instanceof 检测。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js和php如何获取当前url的内容
Sep 22 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
如何利用node转发请求详解
Sep 17 Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
javascript import css实例代码
2008/07/18 Javascript
javascript数组的使用
2013/03/28 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2016入党心得体会范文
2016/01/06 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
警用民用对讲机找不同
2022/02/18 无线电