Vue结合之前的知识，写的一个小案例
前提知识:
直接贴代码吧！
<body>
<div id="app">
<!-- cnumber1，cnumber2
为子组件的属性名，把这个父组件属性名帮到子组件属性名，子组件就可以使用父组件的属性值
父组件传值是用子组件中的props，即cnumber1在props中定义
@number1change="finputNumber1"
@为v-on,绑定子组件使用this.$emit(number1change，this.dcnumber1)传过来的自定义方法，dcnumber为传过来的值
finputNumber1为父组件中定义的方法，没有‘（）’则默认是$emit('',arg)中的arg值
父组件传值给子组件使用$emit()
-->
<cpn :cnumber1="fnumber1"
:cnumber2="fnumber2"
@number1change="finputNumber1"
@number2change="finputNumber2"></cpn>
</div>
<template id="cpn">
<div>
<!--cnumber为子组件属性名-->
<h2>props:{{cnumber1}}</h2>
<!--dcnumber为子组件中的data方法中的属性名，由于可能子组件被复用，所以使用data，而不用props比较安全-->
<h2>data:{{dcnumber1}}</h2>
<!--v-model为双向绑定，即更改dcnumber值在组件中会改变，在dom中显示的也会动态改变
@input监听input输入框的状态，当输入的有变化时，触发子组件cinputNumber1方法，动态修改组件中的值
-->
<input type="text" v-model="dcnumber1" @input="cinputNumber1">
<h2>props:{{cnumber2}}</h2>
<h2>data:{{dcnumber2}}</h2>
<input type="text" v-model="dcnumber2" @input="cinputNumber2">
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//父组件的属性和值
fnumber1:9,
fnumber2:10
},
methods:{
//父组件的方法，在<cpn>中调用
finputNumber1(num){
this.fnumber1=num;
},
finputNumber2(num){
this.fnumber2=num;
}
},
components:{
cpn:{
template:"#cpn",
props:{
//定义属性，用于父组件传值给子组件
cnumber1:Number,
cnumber2:Number
},
data(){
return{
//初始化值，用于复用不会共用同样的cnumber,
dcnumber1:this.cnumber1,
dcnumber2:this.cnumber2
}
},
methods:{
cinputNumber1(){
console.log(this.dcnumber1);
//将更改后的number1传给父组件
this.$emit("number1change",this.dcnumber1);
//修改number2后传给父组件更改number2
this.dcnumber2=this.dcnumber1 * 100;
this.$emit("number2change",this.dcnumber2)
},
cinputNumber2(){
console.log(this.dcnumber2);
//将更改后的number2传给父组件
this.$emit("number2change",this.dcnumber2)
//修改number1后传给父组件更改number1
this.dcnumber1=this.dcnumber2 / 100;
this.$emit("number1change",this.dcnumber1)
}
}
}
}
});
</script>
</body>