当前阅读教程:Vue.JS入门教程 > 组件-动态prop | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 组件-Prop属性 | 下一篇: Vue.js 自定义指令 |
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件。 示例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件-动态prop</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--双向绑定属性xinxi--> <input v-model="xinxi"><br> <!--直接显示属性xinxi的值--> {{xinxi}}<hr> <!--给自定义组价,直接传数据--> <child myvar="hello vue"></child> <!--给自定义组价,将变量作为数据传递过去--> <!--改变顶部输入框的内容,下面组件的内容随之改变--> <child v-bind:myvar="xinxi"></child> </div> <script> //自定义组件 Vue.component('child',{ props:['myvar'], template:'<h1>{{myvar}}</h1>' }) //实例化 new Vue({ el:"#app", data:{ xinxi:'父组件的内容' } }) </script> </body> </html> 效果图 |
|
上一篇: 组件-Prop属性 | 下一篇: Vue.js 自定义指令 |