vue2的js调用式组件如何给组件传递props

在Vue2中，可以通过props选项定义组件的属性，然后在父组件中通过v-bind指令将数据动态传递给子组件。以下是一个简单的示例：

// 子组件
Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

// 父组件
new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello from parent'
  }
})

在父组件的模板中，可以使用v-bind指令将数据动态绑定到子组件的props上，例如：

<div id="app">
  <my-component v-bind:message="parentMessage"></my-component>
</div>

这里，我们将父组件的`parentMessage`属性动态绑定到子组件的`message`属性上，从而将数据传递给子组件。在子组件中，我们可以通过props选项访问这个属性，例如：

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>',
  mounted: function () {
    console.log(this.message) // 输出：Hello from parent
  }
})

这个例子中，子组件的模板会渲染出父组件传递过来的数据，同时在子组件的mounted钩子函数中打印出这个数据，以验证其已经成功传递。