描述问题
有时会有这种需求：父组件传值给子组件后，子组件要修改该值
根据 vue教程-props单向数据流 可知，不能直接修改
案例-演示错误
功能如下图，父组件传值给子组件，然后点击 按钮，年龄会加1：
创建组件
在 components 目录下，创建 UserInfo3.vue 文件，内容如下：
<template>
<div id="app">
{{msg}}
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
<button @click="add">年龄加1</button>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'用户详情信息'
}
},
methods:{
add:function(){
this.age+=1//修改父组件传递子组件的值
}
},
props:['name','sex','age']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
使用组件
修改 App.vue，内容如下：
<template>
<!-- 模板 -->
<div id="app">
使用组件
<user-info3 :name="fname" :sex="fsex" :age="fage" />
</div>
</template>
<script>
import UserInfo3 from './components/UserInfo3'
export default {
name: 'App',
components: {
'user-info3':UserInfo3, //注册局部组件
},
data:function(){
return {
fname:'张三',
fsex:'男',
fage:22
}
}
}
</script>
结果
点击按钮，警告 如下：
原因
这么操作，可以 实现功能，但vue 不建议这么做
因为 props 是单向数据流
正确做法
修改 UserInfo3.vue 文件，内容如下：
<template>
<div id="app">
{{msg}}
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{myAge}}（使用myAge）</div>
<button @click="add">年龄加1</button>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'用户详情信息',
myAge:this.age //定义变量，该变量值是外部传入的值
}
},
methods:{
add:function(){
this.myAge++ //修改myAge
}
},
props:['name','sex','age']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>