当我们在 Vue 中需要进行组件间的数据传递时,就需要使用到一些传值方法。下面将从 props、emit 和 vuex 三个方面分别介绍 Vue 中三种传值方法。
1. props
props 是 Vue 中组件间传值最常用的方法之一。它可以实现父组件向子组件传值,在子组件中可以直接使用 props 来访问。
1.1. 定义props
在父组件中定义 props,示例代码如下:
<template>
<child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components:{
Child
},
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
在子组件中使用 props,示例代码如下:
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
props: ['msg']
}
</script>
1.2. 使用props
- 在父组件中将所需的数据传入子组件。
<template>
<child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components:{
Child
},
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
- 在子组件中使用 props。
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
props: ['msg']
}
</script>
2. emit
emit 是 Vue 中子组件向父组件传值的方法,它可以在子组件中通过 emit 方法将数据传递给父组件。
2.1. 定义emit
在子组件中定义 emit,在这个例子中,我们传递一个字符串数据:
<template>
<h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
clickHandler() {
this.$emit('click-event', 'Hello Parent Component!')
}
}
}
</script>
2.2. 使用emit
- 在父组件中调用 emit 方法,并接收子组件传递的数据。
<template>
<child @click-event="showData"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
showData(data) {
console.log(data)
}
}
}
</script>
- 在子组件中通过 emit 方法将数据传递给父组件。
<template>
<h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
clickHandler() {
this.$emit('click-event', 'Hello Parent Component!')
}
}
}
</script>
3. vuex
vuex 是 Vue.js 中一种状态管理模式,用于在多个组件之间共享状态。通常情况下我们可以使用 props 和 emit 来进行父子组件之间的数据传递,但是当组件之间的关系变得更加复杂时,就需要使用 vuex 来进行管理了。
3.1. 定义vuex
将所有的需要共享的状态放在 Vuex 的 store 中进行管理:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
3.2. 使用vuex
- 在需要使用 state 的组件中引入 Vuex 并使用 mapState 将 state 映射到组件计算属性中。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: mapState({
message: state => `现在的数值是${state.count}`
}),
methods: mapMutations([
'increment'
])
}
</script>
- 在使用 state 的组件中使用方法来改变 state 中的数据。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: mapState({
message: state => `现在的数值是${state.count}`
}),
methods: mapMutations([
'increment'
])
}
</script>
以上就是 Vue 中的三种传值方法:props、emit 和 vuex。当组件关系相对简单时可以使用 props 和 emit 进行传递数据,当组件之间的关系变得更加复杂时,可以使用 vuex 进行状态管理。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue 中几种传值方法(3种) - Python技术站