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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。