vue的props实现子组件随父组件一起变化
2016-10-27 09:18
751 查看
本文实例为大家分享了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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue的props实现父组件变化子组件一起变化
- 浅谈vue的props,data,computed变化对组件更新的影响
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- Vue 使用Props属性实现父子组件的动态传值
- Vue.js 递归组件实现树形菜单
- Vue.js组件tabs实现选项卡切换效果
- Vuejs——(9)组件——props数据传递
- Vue.js实现一个自定义分页组件vue-paginaiton
- 用vue实现模态框组件
- Unity3d实现组件有一定斜率变化的颜色渐变
- 如何在Vue2中实现组件props双向绑定
- Vue.js组件tree实现无限级树形菜单
- 网页树组件的实现(一起探讨)
- Vue.js组件tree实现省市多级联动
- vue如何实现父子组件通信,以及非父子组件通信(待看)
- Vue.js组件tabs实现选项卡切换效果
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
- Java_利用多线程实现窗口组件背景图大小按比例变化
- Vue组件BootPage实现简单的分页功能
- Vue2实现组件props双向绑定