1. 第一种方式针对 针对单一变量 ,直接上代码

注意:所有事件名称不能用原有的事件名或者已经存在的事件名,如使用input做为事件名,不会报错,但是效果不正确.

<div class="container" style="margin-top: 12px;"><div id="demo" class="row">{{ say }}<br /><my-input :value="say" v-on:changevalue="changeage"></my-input></div></div><script>new Vue({el: '#demo',data: {say: "123"},components: {"my-input": {props: ['value'],data() {return {valuex: ''}},/*  computed: {xxxx() {alert('computed');return this.valuex + '111';}},watch: {value: function() {this.valuex = this.value;alert('watch');}}, */template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}-{{xxxx}}</div>",methods: {change1(e) {var v = e.target.valuethis.$emit('changevalue', v)}}}},methods: {changeage: function(v) {alert(v)this.say = v}}})</script>

2. 第二种方式针对 针对对象变量(其它类型变量请自己测试,如数组类型)在子组件中直接用v-model即可 ,直接上代码

注意:子组件中直接用v-model绑定父组件过来的prop v-model:value="persion.name" .
父组件中 v-bind:persion="persion" 在官方网站中说可以这样写 v-bind="persion" .我试了,但是不可以.

 <div class="container" style="margin-top: 12px;"><div id="demo" class="row"><my-input v-bind:persion="persion"></my-input></div></div><script type="text/x-template" id="m-input-template"><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><input type="text" v-model:value="persion.name"><!-- <input type="text" v-model:value="say"> --></div></script></div><script>Vue.component('my-input', {props: {//say: String,persion: Object},template: '#m-input-template'})new Vue({el: '#demo',data() {return {//say: "123",persion: {id: 0,name: 'xiaoming',age: 22,isman: true}}}})</script>