可能由于vue用的还是比较少，之前都是用vuex来进行变量共享的，老是忘记，这里做个总结，方便后期查询。
父子组件传值
方法：
通过props来进行父子组件之间的通信
- 父组件中通过v-bind传参数
- 子组件通过props接受参数
- 依赖注入(另外一种非响应式但是可以递归传值的方法请看这篇文章)
例子
<!-- 父组件 -->
<template>
<div>
this is parent
<child :name = "name" v-bind = "options" :arr = "testArr" @test="test"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'parent',
components: {
child
},
data() {
return {
name: 'wcx',
options: {
age: 12,
sex: 'man'
},
testArr: [1,23,4]
}
},
methods: {
test(msg) {
this.name = msg;
}
}
}
</script>
<style lang="less">
</style>
<!-- 子组件 -->
<template>
<div>
{{name}}
{{age}}
{{sex}}
{{arr[1]}}
<button @click = "showmsg">传值给父组件</button>
</div>
</template>
<script>
export default {
props:{
name: {
type: String,
default: function() {
return 'hello'
}
},
age: Number,
sex: String,
arr: Array
},
data() {
return {
}
},
methods: {
showmsg() {
this.$emit('test', 'child')
}
}
}
</script>
<style lang="less">
</style>
就像上面代码写的那样，只要v-bind在父组件中的子组件中传入参数，子组件通过props捕获即可且不需要在子组件的data中声明。
子父组件传值
方法：
通过自定义事件来进行父子组件之间的通信
- 在父组件中写一个事件以及触发后的回调函数，并写好形参。
- 在子组件中用原生事件触发一个回调函数，里面写成如下形式：$vm.emit('父组件中定义的xx事件', '要传的参数')
例子
同父子组件之间的例子
组件间的传参
方法：
通过vuex来管理
- 安装vuex
- Vue.use(vuex)
- 对 vuex中store进行实例化
- 在vue的实例中传入store
- 通过
store.commit('store中定义好的方法', '需要传的参数 ')改变参数
- 在需要传参的组件中通过computed和watch进行监听捕获需要的参数
例子
<!-- 需要传参的组件 -->
<template>
<div>
this is parent
{{param1}}
<button @click = "test">parentbtn</button>
<child></child>
</div>
</template>
<script>
import child from './child';
export default {
name: 'parent',
components: {
child
},
data() {
return {
param1: this.$store.state.param1
}
},
methods: {
test() {
this.$store.commit('f1', 1)
}
},
//利用computed监听vuex值的变化
computed: {
listenStore() {
return this.$store.state.param1;
}
},
//利用watch监听computed中listenStore函数的变化并将新值赋给本组件中定义的变量
watch: {
listenStore: {
handler(newValue, oldValue) {
this.param1 = this.$store.state.param1;
},
deep: true
}
}
}
</script>
<style lang="less">
</style>
//main.js 入口js
// 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 App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.config.productionTip = false;
Vue.use(Vuex);//放在最前面
const store = new Vuex.Store({//创建store实例
state: {
param1: 0
},
mutations: {
f1(state, param) {
state.param1 = param;
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,//传入vue实例的内部
components: { App },
template: '<App/>'
})
``
# 【完】