使用Vue 组件怎么修改根实例的数据

在Vue组件中修改根实例的数据，需要先了解Vue的数据响应式机制。Vue的数据响应式是指当数据发生变化时，与之相对应的组件会自动重新渲染。

在Vue中，根实例是一个Vue实例，拥有数据和方法。如果要修改根实例的数据，可以通过组件的父子组件通信来实现。

组件的通信有两种方式：props和事件。props是父组件向子组件传递数据，事件是子组件向父组件传递消息。

利用props和事件，可以实现在组件中修改根实例的数据。

步，将根实例的数据作为props传递给子组件。

// 根实例
new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

// 子组件
Vue.component('child-component', {
  props: ['count'],
  methods: {
    increment () {
      this.$emit('increment')
    }
  },
  template: 
    <div>
      Count: {{ count }}
      <button @click="increment">Increment</button>
    </div>
  
})

在上面的代码中，将根实例中的count数据作为props传递给子组件，子组件可以通过props来获取count数据。

子组件中定义了一个increment方法，并使用$emit方法向父组件发送increment事件。

第二步，父组件监听子组件的事件，并在事件处理函数中修改根实例的数据。

// 根实例
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    incrementCount () {
      this.count += 1
    }
  }
})

// 子组件
Vue.component('child-component', {
  props: ['count'],
  methods: {
    increment () {
      this.$emit('increment')
    }
  },
  template: 
    <div>
      Count: {{ count }}
      <button @click="increment">Increment</button>
    </div>
  
})

在上面的代码中，在根实例中定义了一个incrementCount方法，并在父组件中监听子组件的increment事件。当子组件触发increment事件时，调用incrementCount方法来修改根实例的count数据。

需要注意的是，只有在父子组件之间存在props和事件的关系时，才能通过子组件来修改父组件的数据。

总结：通过props和事件的父子组件通信，可以实现在组件中修改根实例的数据。首先将根实例的数据作为props传递给子组件；其次，在子组件中定义一个事件，并在事件处理函数中使用$emit方法向父组件传递事件；最后，在父组件中监听子组件的事件，并在事件处理函数中修改根实例的数据。