<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test v-mode transfore</title>
<script src="../../js_script/vue-2.3.0.js"></script>
<script>
window.onload = function() {
Vue.component('child', {
template: '#child',
props: ['y'],
data: function() {
return {
x: this.y
}
},
watch: {
x: function() {
debugger;
this.$emit('update:y', this.x);
}
}
});
new Vue({
el: '#app',
data: {
y: 'hi'
},
methods: {
updateY: function(value) {
this.y = value;
}
}
});
}
</script>
</head>
<body>
<template id="child">
<div>
<p>
x = {{x}}
</p>
<p>
<input type="text" v-model="x" />
</p>
</div>
</template>
<!-- -->
<div id="app">
<div>
y = {{y}}
</div>
<child :y="y" @update:y="updateY"></child>
</div>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test v-mode transfore</title>
<script src="../../js_script/vue-2.3.0.js"></script>
<script>
window.onload = function() {
Vue.component('child', {
template: '#child',
props: ['y'],
data: function() {
return {
x: this.y
}
},
watch: {
x: function() {
debugger;
this.$parent.$emit('update:y', this.x);
}
}
});
/* ============================================================== */
new Vue({
el: '#app',
data: {
y: 'hi'
},
created: function() {
debugger;
this.$on('update:y', this.updateY);
},
methods: {
updateY: function(value) {
debugger;
this.y = value;
}
}
});
}
</script>
</head>
<body>
<template id="child">
<div>
<p>
x = {{x}}
</p>
<p>
<input type="text" v-model="x" />
</p>
</div>
</template>
<!-- -->
<div id="app">
<div>
y = {{y}}
</div>
<child :y="y"></child>
</div>
</body>
</html>
