通过v-model指令控制组件的隐藏、显示

在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示、隐藏组件的功能效果呢?好吧~接下来我直接上代码

1.新建一个叫child.vue的vue组件文件

内容如下:

<!--child.vue-->
<template>
    <div class="tips_wrap" v-if="showChild">
		我是自定义组件child
    </div>
</template>
<script>
export default {
    model: {
        prop: 'showChild'
    },
    props: {
        showChild: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        closeChild() {
            this.$parent.showChild= !this.$parent.showChild
            // 或者可以这样写,子组件用input事件传递值,父组件直接用v-model里面的属性进行接收
            this.$emit('input', false)
        }
    }
}
</script>

2.将这个组件注册在全局

方便直接使用,也可以不注册,在main.js文件里面引入并注册:

// 引入自定义组件
import Child from '@/components/Child'
// 注册自定义组件
Vue.component('Child', Child)

3.在父组件文件里面写入Child组件

并加上v-model="showChild":

<template>
    <Child v-model="showChild"></Child>
</template>
<script>
export default {
    data() {
        return {
            showChild: true
        }
    }
}
</script>

好了,到此实现自定义组件通过v-model指令控制组件的隐藏、显示 

在组件中实现v-model

v-model本质是语法糖,它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

1.v-model使用的属性和事件

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件

  • input输入框(type为text)、textarea元素使用value属性和input事件
  • checkbox、radio使用checked属性和change事件
  • select下拉框使用value属性和change事件

2.自定义组件中输入框的v-model

在父组件中使用自定义组件myInput,使用v-model传入数据

<myInput v-model="name" />

以上写法相当于如下

<my-input :value="msg" @input="(e)=>{msg=e}"/>

v-model是value属性和input事件的语法糖

1、第一种写法

在组件的props中,通过value接收父组件v-model传过来的数据。

在输入时,通过$emit触发input事件,并将当前的输入值传过去,就会在父组件上触发input事件,并将传来的值赋给父组件上的值

<template>
  <div class="myInput">
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    value:{}
  },
};
</script>

2、第二种写法

一般以第一种写法就可以达到目的了。

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

以input(type为text)标签的v-model为例,使用model后:

model: {
    prop: "xxxxx",
    event: "yyyyy",
  },
  • 就将原来要接收的value属性改为了xxxxx属性,
  • 原来要抛出的input事件,改为了yyyyy事件
  • 所以,在props中接收xxxxx属性
  • 触发事件时,触发yyyyy事件
<myInput v-model="name" />

此时就相当于如下代码

<my-input :xxxxx="msg" @yyyyy="(e)=>{msg=e}"/>
<template>
  <div class="myInput">
    <input
      type="text"
      :value="xxxxx"
      @input="$emit('yyyyy', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  model: {
    prop: "xxxxx",
    event: "yyyyy",
  },
  props: {
    xxxxx: String,
  },
};
</script>

一个组件中只能写一个输入框,因为v-model只能绑定一个数据;

如果想写一个组件,在组件内有多个输入框,就只能传一个对象给子组件了。

3.通过v-model控制组件的显示

在一些组件库中,一些组件例如dialog组件,可以通过v-model来控制dialog的显示与隐藏,这是怎么实现的?

isShow控制组件box的显示与否

<box v-model="isShow"/>

在box组件中,

  • 通过props的value接收v-model传过来的值;
  • 定义一个变量showModal,并将value的值同步赋值给它;
  • 使用showModal控制组件的显示隐藏;
  • 点击box组件时,将showModal设为false,同时触发input事件,并将当前的showModal值传过去;
  • 父组件响应input事件,将v-model绑定的值赋值;
  • div元素使用的是value属性和input事件(div元素可以变成输入框,它上面存在input事件)
<template>
  <div class="box" @click="hide" v-show="showModal"></div>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
    },
  },
  data() {
    return {
      showModal: false,
    };
  },
  watch: {
    value(val) {
      this.showModal = val;
    },
    showModal(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    hide() {
      this.showModal = false;
    },
  },
};
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部