v-model自定义组件

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

1、v-bind（:）：绑定value属性

2、v-on（@）：给当前元素绑定input事件

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

     //v-model双向绑定
     //

     //手动原生态实现双向绑定
     

Vue.component('input-price', {
    template: ''
});
new Vue({
    el: '#app',
    data: {
         price: ''
    }
});

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

1、接收一个value值

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

自定义表单中实现：

      //

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

     
     
{{price}}

Vue.component('price-input', {
    // 5、将父组件的value值通过props传递给子组件
    // 1、当有数据输入时触发了该组件的input事件
    template: '',
    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;
          }
      }
 });

画图表示↓