vue项目中app.vue页面用了router-view标签,子页面security如何向app.vue传参
时间: 2023-08-10 22:07:25 浏览: 107
在Vue项目中,子页面(Security组件)如何向父级(App.vue组件)传递参数,可以通过事件总线(Event Bus)或 Vuex 进行实现。
1. 事件总线(Event Bus)的方式:
在main.js中引入Event Bus:
```
import Vue from 'vue'
export const EventBus = new Vue()
```
在子组件中发送事件:
```
import { EventBus } from '../main.js'
export default {
methods: {
sendData() {
EventBus.$emit('send-data', 'Hello, App.vue!')
}
}
}
```
在父组件中监听事件:
```
import { EventBus } from '../main.js'
export default {
created() {
EventBus.$on('send-data', data => {
console.log(data) // Hello, App.vue!
})
}
}
```
2. Vuex的方式:
在store.js中定义state和mutation:
```
const state = {
data: ''
}
const mutations = {
setData(state, data) {
state.data = data
}
}
export default new Vuex.Store({
state,
mutations
})
```
在子组件中提交mutation:
```
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setData']),
sendData() {
this.setData('Hello, App.vue!')
}
}
}
```
在父组件中获取state:
```
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
data: state => state.data
})
}
}
```
通过以上两种方式,您就可以在Vue项目中实现子组件向父组件传递参数的功能了。
阅读全文