VUE组件封装_vue组件内部双向绑定

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

官方：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

v-model实际上只是一个语法糖：

<input v-model=”password”>

作用与以下相似：

<input type=”text” :value=”password” @input=”password=$event.target.value”>

也就是通过v-model传递的值，最终是传递给了子组件props中value属性，子组件修改value值需要通过触发input事件并传递需要修改的值给父组件。

简单的效果：

父组件Home.vue：

<template>
    <div class="home">
        <button @click="isShow=true">修改</button>
        <child v-model="isShow" title="修改昵称"></child>
    </div>
</template>

<script>
    import child from '@/components/child.vue'
    export default {
        name: 'Home',
        components: {
            child
        },
        data() {
            return {
                isShow:true
            };
        },
        methods: {

        },
        mounted() {

        },
    }
</script>
<style lang="scss" scoped>
.home{
    position: absolute;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

子组件Child.vue：

<template>
    <div>
        <div class="fullbg" v-if="value" @click="cannelPop()">
            <div class="fulltop" :class="{'bottom':type=='bottom','top':type!='bottom'}" @click.stop="">
                <div class="title" v-if="title">{
  
  {title}}</div>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'child',
    components: {  },
    props:{
        //控制显示与隐藏
        value:{
            type:Boolean,
            default:false
        },
        //弹窗类型，两种：上和下
        type:{
            type:String,
            default:"top"
        },
        //弹窗标题，如果不给标题，那么也不会显示标题行
        title:{
            type:String,
            default:""
        }
    },
    data() {
        return {
        };
    },
    mounted() {
        
    },
    methods: {
        //点击黑色遮罩区域隐藏弹窗
        cannelPop(){
            this.$emit('input',false);    //通过触发input去修改v-model的值
        }
    },
};
</script>

<style lang="scss" scoped>
.fullbg{
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.fulltop {
    position: fixed;
    z-index: 1001;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 10px 20px;
    background: #FFFFFF;
    max-height: 80vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.top{
	top:0;
}
.bottom{
	bottom:0;
}
.title{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
</style>

说明：
(默认状态下是model:{prop:’value’,event:’change’})

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

如果想修改v-model绑定子组件的props属性值，那么可以修改子组件model中的prop为需要设置的props中的某个值。