v-model自定义组件

v-model 双向绑定实际上包含两个操作:

1、v-bind(:):绑定value属性

2、v-on(@):给当前元素绑定input事件

在一般的普通表单中实现:

<div id="app">
     //v-model双向绑定
     //<input-price v-model="price"></input-price>

     //手动原生态实现双向绑定
     <input type="text" :value="price" @input="price=$event.target.value">
</div>
Vue.component('input-price', {
    template: '<input type='text'>'
});
new Vue({
    el: '#app',
    data: {
         price: ''
    }
});

 在自定义组件中的操作应该有:

1、接收一个value值

2、触发input事件,并传入新值

自定义表单中实现:

<div id="app">
      //<price-input v-model="price"></price-input>

      //手动实现了v-model双向绑定
      //3、父组件的input事件被触发,将传来的值赋给父组件的变量price
      //4、父组件value的值绑定到price

     <price-input :value="price" @input="onInput"></price-input>
     <p>{{price}}</p>
</div>
Vue.component('price-input', {
    // 5、将父组件的value值通过props传递给子组件
    // 1、当有数据输入时触发了该组件的input事件
    template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
    props: ["value"],
    methods: {
         updateVal: function(val) {
            // 2、手动触发父组件的input事件并将值传给父组件
            this.$emit('input', val);
         }
     }
});
var app = new Vue({
     el: '#app',
     data: {
         price: ''
     },
     methods: {
          onInput: function(val) {
               this.price = val;
          }
      }
 });

画图表示↓

展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值