vue子组件改变父组件数据的两种方法
今天再看github上别人的项目时发现一个vue的小细节,之前没有见过特写一篇文章记录一下……,小细节为方法二。方法一子组件代码<template><div @click="open"></div></template>methods: {open() {this.$
·
今天再看github上别人的项目时发现一个vue的小细节,之前没有见过特写一篇文章记录一下……,小细节为方法二。
方法一
子组件代码
<template>
<div @click="open"></div>
</template>
methods: {
open() {
this.$emit('showbox',true); //触发showbox方法,true为向父组件传递的数据
}
}
父组件
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
<div>{{ msg }}</div>
data () {
return {
msg: false,
}
},
methods: {
toshow(msg) {
this.msg = msg;
}
}
方法二
这个方法不用在父组件那里写自定义事件,对于处理一些小数据简单易用,推荐方法一(毕竟更形象直观)
子组件代码
<template>
<div @click="open"></div>
</template>
methods: {
open() {
this.$emit('updata:mag',true); //触发showbox方法,true为向父组件传递的数据
}
}
父组件
<child :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
<div>{{ msg }}</div>
data () {
return {
msg: false,
}
},
methods: {
toshow(msg) {
this.msg = msg;
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)