vue父子组件实现v-model
发布时间：2020-12-14 03:47:21 所属栏目：大数据 来源：网络整理
导读：话不多说，直接上代码 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( ‘pri
|
话不多说，直接上代码 <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示例 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |