使用vue实现动态数据绑定

使用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}}来输出绑定的数据。