使用vue实现动态数据绑定
Vue.component('child-component', { props: ['message'], template: '<div>{{ message }}</div>' }) var app = new Vue({ el: '#app', data: { parentMessage: 'Hello world!' } })
以上代码中,我们定义了一个名为child-component的vue组件,它定义了一个名为message的prop来接收父组件传递过来的数据,然后在模板中使用它来渲染。在根vue实例中,我们定义了一个名为parentMessage的变量来作为父组件传递给子组件的数据。
在HTML中,我们可以像这样使用我们的组件:
<div id="app"> <child-component v-bind:message="parentMessage"></child-component> </div>
我们使用v-bind指令将父组件的parentMessage变量绑定到child-component组件的message prop上,从而实现了动态数据绑定的效果。在子组件中,我们使用{{message}}来输出绑定的数据。