vue 在子组件中修改props
父组件
<template>
<div class="">
<!-- 第一种方法 -->
<child :title="title" />
<!-- 第二种方法,添加修饰符sync -->
<child :title.sync="title" />
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Parent',
components: {
Child,
},
data() {
return {
title: '标题',
}
},
methods: {},
}
</script>
子组件
<template>
<div class="">
<span>{{title}}</span>
<el-button @click="handleClick">修改标题</el-button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
title: {
type: String,
default: '',
},
},
data() {
return {}
},
methods: {
handleClick() {
// 修改子组件传过来的title
const newTitle = '新标题'
<!-- 第一种方法 -->
this.title = newTitle
<!-- 第二种方法,添加修饰符sync -->
this.$emit('update:title', newTitle)
},
},
}
</script>