<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<child-vue v-model="test"></child-vue>
<p>{{ test }}</p>
<button @click="changChild">改变子组件值</button>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var childVue = {
template:"<div><div>{{ msg }}</div><button @click=\"changeFater\">改变父组件值</button></div>",
data(){
return {
message:this.msg // 划重点 不定义这个属性会有报错；
}
},
props:{
msg:0 //父子间传递数据
},
model:{
prop:"msg",//父子间传递数据的属性名称
event:"msgEvent"//定义传递数据到父组件的事件名称
},
methods:{
changeFater(){
this.message = this.msg;// 将数据同步
this.$emit("msgEvent",this.message+=2)// 将同步好的数据传递到父组件
}
}
}
var vue = new Vue({
el:"#app",
data:{
test:0
},
methods:{
changChild(){
this.test+=1
}
},
components:{
childVue
}
})
</script>
</html>
