在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示、隐藏组件的功能效果呢?好吧~接下来我直接上代码
内容如下:
<!--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>
方便直接使用,也可以不注册,在main.js文件里面引入并注册:
// 引入自定义组件 import Child from '@/components/Child' // 注册自定义组件 Vue.component('Child', 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在内部为不同的输入元素使用不同的属性并抛出不同的事件
在父组件中使用自定义组件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", },
<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只能绑定一个数据;
如果想写一个组件,在组件内有多个输入框,就只能传一个对象给子组件了。
在一些组件库中,一些组件例如dialog组件,可以通过v-model来控制dialog的显示与隐藏,这是怎么实现的?
isShow控制组件box的显示与否
<box v-model="isShow"/>
在box组件中,
<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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。