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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
详解javascript中的事件处理
Nov 06 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
Node.js 回调函数实例详解
Jul 06 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
php实现网页端验证码功能
2017/07/11 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
python中字符串的编码与解码详析
2020/12/03 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
软件测试面试题
2015/10/21 面试题
秋季运动会表扬稿
2014/01/16 职场文书
购房协议书范本
2014/04/11 职场文书
岗位明星事迹材料
2014/05/18 职场文书
幼师自荐信范文
2015/03/06 职场文书
小学班主任自我评价
2015/03/11 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
SQL Server Agent 服务无法启动
2022/04/20 SQL Server