在vue中，通常为了结构化，会把一些功能分成组件来写，最后在拼在一起，这样写的话利于维护和管理，但是这样一来，组件之间的传值问题就必须要解决了。
父组件传值给子组件的方法
父组件的代码
<route-driving
ref="RouteDriving"
@handle-route="handleRoute"
@handle-select="handleSelectBYhand"
@handle-waypoint="handleAddwaypoint"
@delete-waypoint="deleteWaypoint"
:fromwalkingstart="fromchildstart"
:fromwalkingend="fromchildend"
:fromwalkingstartname="fromchildstartname"
:fromwalkingendname="fromchildendname">
</route-driving>
子组件代码
export default {
props: ['fromwalkingstart', 'fromwalkingend', 'fromwalkingstartname', 'fromwalkingendname'],
}
父组件给子组件传值就是，在子组件中用
props定义几个传值的变量名，在父组件引用自足件的地方，用这几个变量监听父组件的变量，通过改变父组件里被监听的变量，从而改变子组件里的变量
举个例子就是，在子组件里注册
fromwalkingstart，父组件中:fromwalkingstart="fromchildstart"监听变量fromchildstart，在父组件中修改this.fromchildstart的值就可以了，那在子组件怎么使用修改过来的值呢，其实注册的变量就和data定义的一样，直接用this.fromwalkingstart就可以了
子组件传值给父组件的方法
子组件代码
this.$emit('handle-route', data.result, tag, this.selectItemstart, this.selectItemend, this.start, this.end)
父组件代码
// 传递驾车路线参数
handleRoute (data, index, start, end, startname, endname) {
this.$emit('handle-route', data, index)
this.fromchildstart = start
this.fromchildend = end
this.fromchildstartname = startname
this.fromchildendname = endname
}
子组件中用
this.$emit()注册一个方法，通过方法传值给父组件，父组件中使用@handle-route="handleRoute"定义一个方法，接收子组件的传值，这里需要注意的是，在方法中接收参数后，方法中调用不用this.参数名，直接使用参数就可以
父组件调用子组件中的方法
在父组件中被调用的子组件属性里使用ref="RouteDriving"定义一个名称，然后在父组件的方法中使用
this.$refs.RouteDriving.definition()，
definition()是在子组件中定义的方法，就可以在父组件中调用子组件的方法。
组件之间的传值方法（非父子关系或者多层父子组件的传值）
利用vuex来实现，首先在main.js中引入vuex
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex' // 引入 vuex
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import store from './store/index'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/style/index.scss'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(Vuex) // 引入
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 引入
components: { App },
template: '<App/>'
})
然后定义一个新的目录来存放这个仓库
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: {
},
shareUserInfo: {
},
coordinateInfo: {
coordinate: []
}
},
mutations: {
SET_USER (state, payload) {
state.userInfo = payload
},
SET_SHARE_USER (state, payload) {
state.shareUserInfo = payload
}
},
actions: {
setUser ({ commit }, payload) {
commit('SET_USER', payload)
},
setShareUser ({ commit }, payload) {
commit('SET_SHARE_USER', payload)
}
},
strict: false
})
export default store
然后在组件中需要使用这个仓库变量的地方使用
this.$store.state.coordinateInfo.coordinate就可以调用，
这种感觉就像是在一个远程仓库里定义了变量，而你可以直接使用
