码迷,mamicode.com
首页 > 其他好文 > 详细

v-model 用在组件中

时间:2018-04-25 14:27:38      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:color   template   ons   href   inpu   组件   back   .com   响应式   

官方文档:

  使用自定义事件的表单输入组件

技术分享图片

官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

1.  v-bind :  绑定响应式数据
2.  触发 input 事件 并传递数据  (核心和重点)

大体就是:

   监听原生组件的事件, 当获取到原生组件的值后把值通过调用 $emit(‘input‘ ,data) 方法去触发 input事件 
 
demo:
  父组件代码:
<template>
  <div class="hello">
       <button @click="ifShow=!ifShow">点击显示</button>
       <show-alert v-model="ifShow"></show-alert>
  </div>
</template>

<script>
import showAlert from ./showAlert.vue
export default {
  name: HelloWorld,
  components:{
      showAlert,
  },
  data () {
    return {
            ifShow:false,
    }
  }
}
</script>

  子组件代码:

<template>
    <div id="showAlert" :value="value" v-if="ifValue">
        <div>showAlert 内容</div>
        <button class="close" @click="ifValue=false">关闭</button>
    </div>
</template>

<script>
    export default{
        props:{
            value:{
                type:Boolean,
                default:false,
            }
        },
        data:function(){
            return{
                ifValue:false,
            }
        },
        watch:{
            value(bool){
                this.ifValue=bool;
                console.log(bool=+ bool);
            },
            ifValue(val){
                /*使用了v-model的组件会自动监听 input 事件, 
                 * 并把这个input事件所携带的值 传递给v-model所绑定的属性,
                 * 这样组件内部的值就给到了父组件了
                 */
                this.$emit(input,val);//传值给父组件, 让父组件监听到这个变化
            }
        },
    }
</script>

<style scoped>
    .close{
        background:red;
        color:white;
    }
</style>

    实现效果:

技术分享图片

  点击显示按钮以后:

技术分享图片

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

  点击子组件关闭按钮后:

技术分享图片

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

  点击子组件关闭按钮后:

技术分享图片

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

v-model 用在组件中

标签:color   template   ons   href   inpu   组件   back   .com   响应式   

原文地址:https://www.cnblogs.com/rachelch/p/8944367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!