Vue中props的使用详解

时间：2021-05-26

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的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章