//js
//看代码
Vue.component('my-input',{
props['myprops'],
template:'<input v-bind:value="myprops"
v-on:input="updateValue($event.target.value)">',
methods:{
updateValue":function(value){
var myValue = value; //将输入的文本框内容传来
this.$emit('shijian',myValue); //自定义事件,并传参
}
}
})
var app5 = new Vue({
el:'#app5',
data:{
message:''
},
method:{
fatherValue:function(myValue){
this.message = myValue;
}
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
//html
<div id="app5">
//实时显示message的值
<p>{{message}}</p>
//传统的双向绑定
<input v-model="message">
//父组件与子组件的双向绑定
<my-input v-bind:value="message" v-on:shijian="fatherValue"></my-input>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
梳理一下程序运行的流程。
1、子组件通过v-on:input="updateValue($event.target.value)"
触发input事件,获取输入的值,作为参数传给子模板的方法updateValue.
2、在updateValue方法里,定义一个自定义事件,并将获取的参数暴露给父模板。
3、父模板在前端(html)中使用v-on:shijian="fatherValue"
捕获子组件提供的参数和自定义事件。并指向一个方法fatherValue
.
4、fatherValue
方法使用了来自子组件的参数,并赋给了父组件的变量。从而改变了父组件变量的值。