组件间传值vuex(子传子)
不同组件间(非父子之间)如何实现数据的传递以及数据的联动呢?这里我们将用到vuex进行数据联动
vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 而状态管理模式包括 1.state,驱动应用的数据源; 2.view,以声明方式将 state 映射到视图; 3.actions,响应在 view 上的用户输入导致的状态变化。 Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。需要构建一个中大型单页应用,可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。实现功能:
假设有子组件A和子组件B,当A中数据发生变化时,B组件中数据随其变化。实现步骤:
1.安装vuex
cnpm installvuex -S
2.main.js中引入
import Vuex from 'Vuex';
import store from "./vuex/store";
Vue.use(Vuex);
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>',
render: h => h(App)
})
3.构建核心仓库store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
title: '单行文字',
},
mutations:{
newTitle(state,msg){
state.title=msg
},
}
})
4.将状态映射到组件A
<template>
<div class="form" id="form1&#