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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
package.json文件配置详解
Jun 15 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
杏林同学录(八)
2006/10/09 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
CCPry JS类库 代码
2009/10/30 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Django在win10下的安装并创建工程
2017/11/20 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python 内置模块详解
2019/01/01 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
品牌推广活动策划方案
2014/08/19 职场文书
社区创先争优承诺书
2014/08/30 职场文书
助学贷款贫困证明
2014/09/23 职场文书
大学生党性分析材料
2014/12/19 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
活动总结模板大全
2015/05/11 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers