<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="child">
<div>
<h3>子组件: {{msg.a}}</h3>
<input type="button" value="按钮" @click="change">
</div>
</template>
<div id="box">
<h3>父组件: {{warpMsg.a}}</h3>
<hr>
<child-com :msg="warpMsg"></child-com>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
warpMsg:{
a:"父组件数据"
}
},
components:{
"child-com":{
props:["msg"],
template:"#child",
methods:{
change(){
this.msg.a = "利用js地址传递同步修改父子组件数据"
}
}
}
},
methods:{
}
})
</script>
