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的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
本篇文章主要介绍了windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
这篇文章主要介绍了vue利用全局导航守卫作登录后跳转到未登录前指定页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05使用两种方式调用本地json文件(基于Vue-cli3脚手架)
这篇文章主要介绍了使用两种方式调用本地json文件(基于Vue-cli3脚手架),具有很好的参考价值,希望对大家有所帮助,2023-10-10vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
这篇文章主要介绍了vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09antd form表单使用setFildesValue 赋值失效的解决
这篇文章主要介绍了antd form表单使用setFildesValue 赋值失效的解决方案,具有很好的参考价值,希望对大家有所帮助。2023-04-04
最新评论