前言:vue组件传值在开发中遇到的频率很高,以防遗忘,故写一篇博客记录一下。
1、prop父传子
父组件:
<template>
<div id="father">
<Children :byData="fatherByChildren"/> <!-- ‘:’为‘v-bind’的简写,这里使用‘v-bind’,使用传的是fatherByChildren这个对象,不使用传的是fatherByChildren这个字符串 -->
</div>
</template>
<script>
import Children from '../components/Children.vue' // 引入Children组件
export default {
name: 'father',
data () {
return {
fatherByChildren:"这是Father传给Children的值"
}
},
// ...其它代码
}
</script>
子组件(props接收参数):
<script>
export default {
name: 'children',
props: {
byData: String
},
// ...其它代码
}
</script>
2、$emit()子传父
父组件:
<template>
<div id="father">
<Children @childrenByFather="childrenByFather"/>
</div>
</template>
<script>
import Children from '../components/Children.vue' // 引入Children组件
export default {
name: 'father',
data () {
return {
}
},
methods: {
childrenByFather(val) {
console.log(val) // 输出子组件传来的值:‘这是Father传给Children的值’
}
}
// ...其它代码
}
</script>
子组件:
<template>
<div id="children">
<button @click="goClick">点击传值</button>
</div>
</template>
<script>
export default {
name: 'children',
data () {
return {
childrenByFather:"这是Father传给Children的值"
}
},
methods: {
goClick() {
this.$emit('childrenByFather', this.childrenByFather) // 触发父组件中childrenByFather事件,并将childrenByFather对象传过去
}
}
// ...其它代码
}
</script>
3、非父子组件传值:
非父子之间传值,可以采用发布订阅模式,这种模式在 Vue 中被称为总线机制,或者叫做Bus / 发布订阅模式 / 观察者模式
在main.js中挂载bus属性,所有的子组件都能调用:
Vue.prototype.bus = new Vue() //挂载 bus 属性
组件A中(传):
this.bus.$emit('change',this.message) // 发布
// this.message为要传的值
组件B中(收):
this.bus.$on('change',(msg)=>{ //订阅
this.message= msg // msg为组件传来的值
})
4、vuex状态管理:
store.js中:
export default new Vuex.store({
state: { // 写入数据,类似组件中data
name: '天天'
},
actions: { // 异步更改(接口请求)
changeName ({commit}, modifyName) {
commit('changeName', modifyName) //通过 commit 调用 mutations 中的changeName方法
}
},
mutations: { // 同步更改
changeName (state, modifyName) {
state.name = modifyName
}
}
})
组件中使用 state 中的 name:
this.$store.state.name
组件中修改 state 中的 name 的值:
①没有任何异步操作,直接调用 mutations 中的 changeName 方法:
this.$store.commit('changeName', modifyName) //派发一个名字叫 changeName 的 mutation,并把 modifyName传递过去
②有异步操作,必须调用 Actions 做转发:
this.$store.dispatch('changeName', modifyName) //派发一个名字叫 changeName 的 Actions,并把 modifyName 传过去