<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js_lib/vue-2.3.0.js"></script>
<script>
Vue.component('child', {
template: '<div>\
<p>{{mouth}}</p>\
<button @click="changeName">changeName</button>\
</div>',
data: function () {
return {
mouth: '1.......',
stomach: {
name: '2.............'
}
}
},
methods: {
changeName: function () {
debugger;
this.stomach.name = '3......';
}
}
});
</script>
</head>
<body>
<div id="app">
<child ref="child_1"></child>
<hr />
<p>
Truth: {{childstomach.name}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
childstomach: {
name: 'oh'
}
},
mounted: function () {
// this.$refs.child_1
// 子組件
// this.$refs.child_1.stomach => {}
// this.childstomach 會隨 this.$refs.child_1.stomach 改變
this.childstomach = this.$refs.child_1.stomach;
}
});
</script>
</body>
</html>
