置顶 vue中 组件封装v-mode 使用

技术 demo 前端

JavaScript

2020-06-23 19:07:25

258

作者:黑夜男神

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目。model 选项可以用来避免这样的冲突:

<template>
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
</template>
<script>
export default {
    name: 'base-checkbox',
    model:{
        prop: 'checked',
        event: 'change'
    },
    props: {checked: Boolean}
}

现在在这个组件上使用 v-model 的时候:

<base-checkbox v-model="lovingVue"></base-checkbox> v-model 的时候:

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的属性将会被更新。

以上是官网的基本的方法,弄懂以上的前提下,我们来继续看嵌套组件时怎么再封装一个v-model,我们新建一个组件special-checkbox里面包含上面的组件base-checkbox,如何将子父组件的v-model打通


<template>
  <base-checkbox v-model="newlovingVue"></base-checkbox>
</template>
<script>
export default {
    name: 'special-checkbox ',
    model:{
        prop:'lovingVue',//要存在于props
        event:'change'//当组件的值发生改变时要emit的事件名
    },
    props: ['lovingVue'],
    data:function(){
        return{//要重新定义一个data,赋值为props中的值,因为组件时单数据流,不能直接修改props
            newlovingVue:this.lovingVue
        } 
    },
    watch:{//这里检测data中的值,一旦发生变化就提交事件到父组件
        newlovingVue:function(newVal,oldVal){
            this.$emit('change',newVal)
        },
        // 注 如果porp 父组件传递过来的数据是异步的 这里需要去监听父组件传递过来参数变化再来改变当前组件值最后更通过emit的方法再同步到父组件去
        lovingVue: function(newVal, oldVal) {
            this.newlovingVue =  newVal
        }

    }
}
</script>

现在使用这个二次封装的组件的时候

<special-checkbox v-model="lovingVue"></base-checkbox>
return  {//要重新定义一个data,赋值为props中的值,因为组件时单数据流,不能直接修改props
       newlovingVue:this.lovingVue
    }

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号