<!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: //父子间传递数据
},
model:{
prop:"msg",//父子间传递数据的属性名称
event:"msgEvent"//定义传递数据到父组件的事件名称
},
methods:{
changeFater(){
this.message = this.msg;// 将数据同步
this.$emit("msgEvent",this.message+=)// 将同步好的数据传递到父组件
}
}
}
var vue = new Vue({
el:"#app",
data:{
test:
},
methods:{
changChild(){
this.test+=
}
},
components:{
childVue
}
})
</script>
</html>
![Element 中远程搜索的功能实现[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)