Vue中props的使用详解


Posted in Javascript onJune 15, 2018

props属性是父子组件之间的通信桥梁。何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件。我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父组件的数据传给子组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的测试</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <Child message="父组件的message,我把他的内容重新定义了,但是父组件不会发生改变哦,因为没有绑定,哈哈!!"></Child>
  <hr />
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message'],
    template: '<span>{{ message }}</span>'
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的测试'
    }
  });
</script>
</body>
</html>

代码效果图

在子组件中对父组件的数据进行处理。父组件的数据通过props传入子组件以后,在子组件中也可对数据进行相关处理,包括计算属性、data属性等。这样当子组件需要对数据进行处理时,避免了直接在父组件中对数据进行操作,而且由于props数据流单向性,在子组件中更改数据时,不会对父组件的数据产生影响。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的测试</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message','todos'],
    template: '<span>{{ test }}</span>',
    computed: {
      test: function(){
        return this.message.trim().toUpperCase();
      }}
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的测试'
    }
  });
</script>
</body>
</html>

代码效果图

代码效果图

prop的验证

 我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。

要指定验证规则,需要用对象的形式来定义 prop,而不能用字符串数组

Vue.component('example',{
  props: {
    propA: String,
    propB: [Number,String]
}
});

总结

以上所述是小编给大家介绍的Vue中props的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
深入浅析Vue全局组件与局部组件的区别
Jun 15 #Javascript
react-native android状态栏的实现
Jun 15 #Javascript
JS实现监控微信小程序的原理
Jun 15 #Javascript
vue .sync修饰符的使用详解
Jun 15 #Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 #Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
深入理解Node内建模块和对象
2019/03/12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
pytorch实现查看当前学习率
2020/06/24 Python
python中取绝对值简单方法总结
2020/07/24 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
会计电算化个人自我评价
2013/11/17 职场文书
元旦联欢会感言
2014/03/04 职场文书
卖车协议书
2014/04/21 职场文书
青春演讲稿范文
2014/05/08 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
停车场管理制度范本
2015/08/05 职场文书
治庸问责工作总结
2015/08/11 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Python matplotlib绘制雷达图
2022/04/13 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers