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>