返回

vue组件传值的那些事

Created By ZOU on Jul 18 2019

vue中组件传值有哪几种方式?

1.父组件通过props给子组件传值

// 传递属性value值为1
<ChildComponent :value="1"/>

const ChildComponent = {
// 定义props
props: {
// 接收value属性
value: {
// 验证类型为number
type: Number,
// 默认值为0
default: 0
}
},
created() {
// 使用value
console.log(this.value)
}
}

2.子组件通过触发事件给父组件传值

// 为子组件绑定on-confirm事件监听
<ChildComponent :@on-confirm="onConfirm"/>
// 父组件
const ParentComponent = {
methods: {
// 事件绑定方法,接收value
onConfirm(value) {
// 打印value值为3
console.log(value)
}
}
}

// 子组件
const ChildComponent = {
created() {
// 触发on-confirm事件,传值为3
this.$emit('on-confirm', '3')
}
}

3.跨组件传值/多层组件传值

const eventBus = new Vue()
// 组件1
const FirstComponent = {
created() {
// 监听事件,接收值value
eventBus.$on('changeValue', value => {
// 打印value
console.log(value)
})
}
}
// 组件2
const SecondComponent = {
created() {
// 触发事件,传值value
eventBus.$emit('changeValue', 321)
}
}

4.通过vuex传值

// vuex状态库
const store = new Vuex.Store({
state: {
value: ''
},
mutations: {
CHANGE_VALUE(state, value) {
state.value = value
}
}
})

// 引入mapMutations方法
import { mapMutations } from 'vuex'
// 组件1
const FirstComponent = {
created() {
// 修改value值
this.changeValue(1)
},
methods: {
...mapMutations({
changeValue: 'CHANGE_VALUE'
})
}
}
// 引入mapState方法
import { mapState } from 'vuex'
// 组件2
const SecondComponent = {
computed: {
...mapState({
value: state => state.value
})
},
mounted() {
// 打印value值为1
console.log(this.value)
}
}

以上就是几个vue中组件传值通信的方式

标签: javascript vue