vue中v-model在组件中的使用

案例一：使用自定义事件的表单输入组件

demo:

　　父组件代码:

　　子组件代码:

    实现效果:

　　点击显示按钮以后:

　　前提: this.$emit('input',data);

　　点击子组件关闭按钮后:

　　如果未加this.$emit('input',data);

　　点击子组件关闭按钮后:

　　如果未通过$emit把值传到父组件, 则父组件监听不到子组件的变化.

 

案例二： 封装一个可复用的弹窗组件

 

在首页调用

　　　　点击显示弹窗
　　　　
　　　　showModel:function(){
          this.ifShowModel=true;
          
      },
      close_click:function(){
          this.ifShowModel=false;
      },
      left_click:function(){
          this.ifShowModel=false;
      },
      right_click:function(){
          this.ifShowModel=false;
      }