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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php的4种常见运行方式
2015/03/20 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
PHP面试题及答案一
2012/06/18 面试题
C#公司笔试题
2014/03/28 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
基层工作经历证明
2014/01/13 职场文书
运动会广播稿400字
2014/01/25 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
中秋节祝酒词
2015/08/12 职场文书
化工生产实习心得体会
2016/01/22 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书