vue组件使用v-model传值

最新推荐文章于 2025-03-25 10:43:37 发布

为何远方

最新推荐文章于 2025-03-25 10:43:37 发布

阅读量7.3k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_35992956/article/details/106329232

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何实现一个具有双向绑定特性的组件，通过实例展示了如何使用v-model进行数据绑定，并通过监听change事件来更新父组件的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div>
        <el-cascader
                v-model="brandSellerArr"
                :options="brandSellerOption"
                @change="brandSellerChange"
        ></el-cascader>
	</div>
</template>

<script>
export default {

    props:{
        value: {
            default: ''
        },
    },
    data() {
        return {
            brandSellerArr:[],
            brandSellerOption:[]
        }
    },
    mounted() {
        this.$api({
            key: "getBrandSeller",
            success(data) {
                this.brandSellerOption = data;
            },
            error() {
                this.$message.error("onload error");
            }
        });
    },
    methods: {
        brandSellerChange(value){
            this.$emit('input', value[1])
        }
    }
};
</script>

props里面的value属性默认接受父组件的v-model值

使用this.$emit('input', value[1])向父组件回传v-model值,第一个参数必须为input