组件之间的通信（子组件-改变父组件的值）
Posted BD_evel
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件之间的通信（子组件-改变父组件的值）相关的知识，希望对你有一定的参考价值。
在vue中，组件之间的通信，是不建议子组件改变父组件的值，因为一个父组件有可能会有很多子组件，改来改去会很难管理（别人都这样说，我信）
试试：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=\'../vue.js\'> </script> </head> <body> <div id="app"> <son :son-counter="counter"></son> <p>parent:<input type="text" v-model="counter"/></p> </div> </body> </html> <script> const son={//创建子组件的模板 template:`<div>son:<input v-model="sonCounter" /></div>`, props:[\'sonCounter\'],
//props:{sonCounter:Number/Array/Object/String}...当然我们也可以在子组件中限制，父组件传过来的值类型 }; var app=new Vue({ el:\'#app\', data:{ counter:0, }, components:{ son } }); </script>
当我们改变parent这个输入框中的值时，son对应的输入框的值，也会发生变化，但是反过来，就不行了。
这是他给我的waring,(英文不好的，可以假装不懂，)，只知道有个错。
换个方法试试：
这里不具体讲解组件的创建了。
具体思路：
1）在子组件中触发事件，将事件派送给父组件，然后父组件来监听。
2）父组件监听事件，改变值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component @inc="increment" :counter=\'counter\'></my-component>
<p>{{counter}}</p>
</div>
</body>
</html>
<script>
//全局注册一个组件
Vue.component("my-component",{
template:\'<div>this is son component <button @click="inc">增加</button> </br><span>{{counter}}</span></div>\',
props:["counter"],//子组件的props属性一般用于接收父组件的值
methods:{
inc:function(){
this.$emit("inc");//$emit的作用就是将事件进行向上派发
}
}
});
var app=new Vue({
el:"#app",//指定挂载元素
data:{
counter:0,
},
methods:{
increment(){
this.counter++;
}
}
});
</script>
本质上是子组件通过触发一个事件，父组件监听这个事件，然后做出相应的变化。
以上是关于组件之间的通信（子组件-改变父组件的值）的主要内容，如果未能解决你的问题，请参考以下文章