码迷,mamicode.com
首页 > 其他好文 > 详细

vue父子组件实现v-model

时间:2018-09-03 12:08:17      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:http   price   通过   methods   app   val   targe   1.0   one   

话不多说,直接上代码

<div id="app">

<price-input v-bind:value="price" v-on:input="price = arguments[0]" ></price-input>

<price-input v-model=‘price‘ ></price-input>

<p>{{price}}</p>

</div>

 

<script type="text/javascript ">

Vue.component(‘price-input‘, {

template: ‘<input :value="value " @input="updateVal" type="text ">‘,

props: ["value "],

methods: {

updateVal: function() {

let val = event.target.value

this.$emit(‘input‘,val);

}

}

});

var app = new Vue({

el: ‘#app‘,

data: {

price: ‘‘

},

});

</script>

 

 

大致流程为子组件的输入值改变,触发oninput方法,进而通过emit触发实例上的input方法,进而给父组件中的状态赋值。

demo示例

 

vue父子组件实现v-model

标签:http   price   通过   methods   app   val   targe   1.0   one   

原文地址:https://www.cnblogs.com/zale-blogs/p/9577405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!