UserInverse = { props: ['user', 'changeNameFn'], template: '<div>\ <h2>{{userName}}</h2>\ <input v-if="userName" v-model="userName"/>\ </div>', computed: { userName: { get: function(){ return this.user; }, set: function(name) { this.changeNameFn(name); } } } }; new Vue({ el: '#app', components: { userInverse: UserInverse }, data: { userName: '' }, methods: { changeName: function(name) { this.userName = name; } } });
<script src='https://unpkg.com/vue@2.4.4/dist/vue.js'></script> <div id='app'> <h1>{{userName}}</h1> <input v-model='userName'/> <br /> <br /> <user-inverse :change-name-fn='changeName' :user='userName'></user-inverse> </div>