将数据传递给根Vue类组件

// 定义子组件
Vue.component('child-component', {
  props: ['message'], // 定义一个名为'message'的prop
  template: '<div>{{ message }}</div>' // 使用这个prop
});

// 创建根Vue实例
new Vue({
  el: '#app',
  data: {
    rootMessage: 'Hello from root instance!' // 根实例的数据
  }
});

<div id="app">
  <child-component :message="rootMessage"></child-component> <!-- 将根实例的数据传递给子组件 -->
</div>

// 子组件中正确声明props
Vue.component('child-component', {
  props: ['message'], // 确保名称与父组件中绑定的名称一致
  template: '<div>{{ message }}</div>'
});

// 父组件中正确绑定数据
new Vue({
  el: '#app',
  data: {
    rootMessage: 'Hello from root instance!'
  }
});

<div id="app">
  <child-component :message="rootMessage"></child-component> <!-- 确保使用了正确的绑定语法 -->
</div>