标签: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方法,进而给父组件中的状态赋值。
标签:http price 通过 methods app val targe 1.0 one
原文地址:https://www.cnblogs.com/zale-blogs/p/9577405.html