vue 在子组件中修改props

本文主要是介绍vue 在子组件中修改props，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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() {// 修改子组件传过来的titleconst newTitle = '新标题'<!-- 第一种方法 -->this.title = newTitle<!-- 第二种方法，添加修饰符sync -->this.$emit('update:title', newTitle)},},
}
</script>

这篇关于vue 在子组件中修改props的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---