详解Vue中子组件修改父组件传过来的值的三种方式
作者：陪你去流浪_
这篇文章主要为大家详细介绍了Vue中子组件修改父组件传过来的值的三种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
方式1：子组件发送emit，触发父组件修改
父组件
<template>
<div>
<son :count="count" @updateCount="updateCount" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
count: 0,
};
},
components: { son },
methods: {
updateCount(data) {
this.count = data;
},
},
};
</script>
子组件
<template>
<div class="goodsBasic">
<div>父组件：{{ count }}</div>
<el-button @click="changeCount">方式1</el-button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0,
},
},
methods: {
changeCount() {
this.$emit("updateCount", this.count + 1);
},
},
};
</script>
方式2：在子组件那里强制修改
父组件
<template>
<div>
<son :text.sync="text" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
text: "hello world",
};
},
components: { son },
};
</script>
子组件
<template>
<div class="goodsBasic">
<div>父组件：{{ text }}</div>
<el-button @click="changeCount">方式2</el-button>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: "",
},
},
methods: {
changeCount() {
this.$emit("update:text", "我被强制修改了");
},
},
};
</script>
方式3：子组件定义一个值，来代替父组件传过来的值（不推荐，该方法父子组件的值不是同步修改）
父组件
<template>
<div>
<son :count="count" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
count: 0,
};
},
components: { son },
};
</script>
子组件
<template>
<div class="goodsBasic">
<div>子组件：{{ son_count }}</div>
<el-button @click="changeCount">方式3</el-button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0,
},
},
data() {
return {
son_count: this.count,
};
},
methods: {
changeCount() {
this.son_count++;
},
},
};
</script>以上就是详解Vue中子组件修改父组件传过来的值的三种方式的详细内容，更多关于Vue子组件修改父组件传值的资料请关注脚本之家其它相关文章！