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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 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面向对象的方法重载两种版本比较
2008/09/08 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python之Character string(实例讲解)
2017/09/25 Python
Python装饰器用法实例总结
2018/02/07 Python
python实现树形打印目录结构
2018/03/29 Python
python实现控制台输出彩色字体
2020/04/05 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
教师新年寄语
2014/04/03 职场文书
大学三年计划书范文
2014/04/30 职场文书
机械工程师岗位职责
2014/06/16 职场文书
法学自荐信
2014/06/20 职场文书
行政申诉状范文
2015/05/20 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
javascript对象3个属性特征
2021/11/17 Javascript