Vue中props的使用详解
更新时间：2018年06月15日 16:53:11 作者：南北北南
props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下
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的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue中async-await的使用误区,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要给大家介绍了关于如何正确理解vue中key的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了vue增删改查的简单操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue2.0在table中实现全选和反选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue+element表格实现多层数据的嵌套方式，具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
这篇文章主要介绍了Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
element ui watch el-input赋值之后无法删除或修改问题
这篇文章主要介绍了element ui watch el-input赋值之后无法删除或修改问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论