在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>
本質上是子組件通過觸發一個事件，父組件監聽這個事件，然后做出相應的變化。