Vue.js的template模板是什么？如何使用template模板？

在 Vue.js 中,跨组件共享状态有以下几种方式:

1. props 与 $emit:通过 props 传递数据给子组件,子组件通过 $emit 触发事件将数据传回父组件。

js
// 父组件
<Child :value="value" @input="value = $event"></Child>

// 子组件
props: ['value'],
template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">'  

2. 自定义事件:通过事件中心来管理状态,父子组件都监听事件中心,更新或读取状态数据。

js
// eventHub.js
export const eventHub = new Vue()

// 父组件  
methods: {
  updateState() {
    eventHub.$emit('update-state', { msg: 'some data' })
  }  
},
created() {
  eventHub.$on('update-state', (data) => { /* ... */ })  
}

// 子组件
created() {
  eventHub.$on('update-state', (data) => { /* ... */ })  
}

3. slot 与 provide/inject:通过 provide 在父组件中提供状态数据,子孙组件通过 inject 注入并使用该状态数据。

js
// 父组件 
provide() {
  return {
    state: { /* ... */ }
  }
}

// 子孙组件  
inject: ['state'],
computed: {
  someData() {
    return this.state.someData    
  }
}

4. Vuex:在更为复杂的状态管理场景下,可以使用 Vuex 管理跨组件的状态。

js
// store.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: { 
    increment (state) {
      state.count++
    }
  }  
})

// 组件
computed: {
  count () {
    return this.$store.state.count
  }
},
methods: { 
  increment() { 
    this.$store.commit('increment')
  } 
}

以上是 Vue.js 跨组件状态管理的主要方式,可以覆盖绝大多数场景。