<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>动态绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script>
Vue.component('my-component',{
props: ['message'],
template: '<div>{{message}}</div>'
});
var app = new Vue({
el: '#app',
data: {
parentMessage: ''
}
});
</script>
</body>
</html>
上例使用v-model绑定了父级的数据parentMessage，当通过输入框任意输入时，子组件接受到的props “message”也会实时响应，并更新组件模板。
更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
