单向数据流原理：
子组件不能直接修改父组件中传递的数据
如需间接改变父组件传递的数据 （解决方法：可以在子组件data选项中存储父组件传递的数据之后修改子组件中的数据 即可）
以下是实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件改变父组件参数</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--引入子组件 父组件 向 自组件传msg，a值 -->
<son :msg="msg" :a="a"></son>
</div>
<!-- 子组件son -->
<template id="son">
<div>
<div>我是子组件，父组件传递的数据msg是{{msg}}</div>
<div @click="change">我是子组件，点击我更改父组件传递的a值{{b}}</div>
</div>
</template>
<script>
let son = {
template:'#son',
props:['msg','a'],
//定义子主件的变量
data(){
return {
b:this.a //存储父组件传递的数据
}
},
//子主件方法
methods:{
change(){
console.log('函数执行')
this.b++ //修改子组件中的数据
}
}
}
let vm = new Vue({
el:'#app', //父组件
//父组件的数据
data:{
msg:2,
a:1
},
//注册子组件
components:{
son
}
})
</script>
</body>
</html>运行结果如下：
我是子组件，父组件传递的数据msg是2
我是子组件，点击我更改父组件传递的a值1
自己动手试一下吧！
代码是完整的哦！把代码复制自己创建一个html文件粘贴就行啦！