vue的props实现子组件随父组件一起变化
本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下
类似于用v-bind绑定HTML特性到一个表达式,也可以用v-bind绑定动态Props到父组件的数据。每当父组件的数据变化时,也会传导给子组件:
<div> <inputv-model="parentMsg"> <br> <childv-bind:my-message="parentMsg"></child> </div>
使用v-bind的缩写语法通常更简单:<child:my-message="parentMsg"></child>
实例:
<!DOCTYPEhtml> <htmllang="en"> <head> <scripttype="text/javascript"src="vue.js"></script> <metacharset="UTF-8"> <title>vue的props实现父组件变化子组件一起变化</title> </head> <body> <divid="app1"> <inputv-model="messsage"><!--input绑定实例中data中的message--> <div> <childv-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>' }); varvm=newVue({ el:'#app1', data:{ messsage:'helloyouareagoodboy!' } }); </script> </body> </html>
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。