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 相关文章推荐
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
js切换光标示例代码
Oct 10 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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的基本常识小结
2013/07/05 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
js简单实现删除记录时的提示效果
2013/12/05 Javascript
sails框架的学习指南
2014/12/22 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python比较2个xml内容的方法
2015/05/11 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python中请不要再用re.compile了
2019/06/30 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
研讨会主持词
2014/04/02 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
少先队活动总结
2014/08/29 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
师范生小学见习总结
2015/06/23 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers