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实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
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程序之die调试法 快速解决错误
2009/09/17 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
解读python如何实现决策树算法
2018/10/11 Python
python在不同条件下的输入与输出
2020/02/13 Python
如何清空python的变量
2020/07/05 Python
Python安装Bs4的多种方法
2020/11/28 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
《童趣》教学反思
2014/02/19 职场文书
道路交通安全实施方案
2014/03/12 职场文书
美术指导求职信
2014/03/17 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
项目申请汇报材料
2014/08/16 职场文书
退学证明范本3篇
2014/10/29 职场文书
作息时间调整通知
2015/04/22 职场文书
领导欢送会主持词
2015/07/06 职场文书
停车场管理制度范本
2015/08/05 职场文书
团队拓展训练感想
2015/08/07 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
详解Django的MVT设计模式
2021/04/29 Python