时间:2021-05-26
本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件:
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child></div>使用 v-bind 的缩写语法通常更简单:<child :my-message="parentMsg"></child>
实例:
<!DOCTYPE html><html lang="en"><head> <script type="text/javascript" src="vue.js"></script> <meta charset="UTF-8"> <title>vue的props实现父组件变化子组件一起变化</title></head><body><div id="app1"> <input v-model="messsage" > <!--input绑定实例中data中的message--> <div > <child v-bind:my-message="messsage"></child> <!--子组件绑定实例中data中的message--> </div></div> <script> Vue.config.debug = true; Vue.component('child',{ props: ['myMessage'], //VUE实例中myMessage 等价于my-message template: '<span>{{ myMessage }}</span><br>' }); var vm = new Vue({ el: '#app1', data:{ messsage:'hello you are a good boy!' } }); </script></body></html>本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
思路:父组件通过props传值给子组件,子组件通过$emit来通知父组件修改相应的props值,具体实现如下:importVuefrom'vue'constco
父组件如何给子组件传值使用props举个例子:子组件:fromTest.vue,父组件app.vuefromTest.vue{{title}}//title必须
使用props在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子:VueStudyvarfooComponent={pro
实现父子组件双向数据流整体的思路是:1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数2,子组件的state发生变化时,在子
在Vue中,父子组件的关系可以总结为props向下传递,事件向上传递。父组件通过props给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的