vue在组件中自定义使用v-mode属性

三线码工

已于 2023-07-20 17:12:42 修改

阅读量254

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-31 08:45:30 首次发布

本文链接：https://blog.csdn.net/qq_35946021/article/details/130954107

版权

文章展示了在Vue中如何在父子组件间通过v-model实现数据的双向绑定。子组件通过props接收父组件的值，并使用$emit(input,新值)通知父组件更新。父组件的fatherData变量会根据子组件的变化更新为haha。

摘要由CSDN通过智能技术生成

vue在想要在组件实现v-mode双向绑定

父组件

<modelVue v-model="fatherData"></modelVue>

子组件

<template>
    <div id="showAlert">
         {{value}}
        <button class="close" @click="chose">修改父组件内容</button>
    </div>
</template>
 
<script>
    export default{
        props:{
            value:{ //使用value获取v-mode的值
                type:Boolean,
                default:false,
            }
        },
        data(){
            return{}
        },
        mounted(){
            
        },
        methods:{
            close(){
                this.$emit('input',"haha");//传值给父组件, 让父组件监听到这个变化
            }
        },
    }
</script>

子组件使用value获取v-mode的值

emit方法调用input方法，因为v-mode自带的input方法父组件不需要声明input方法

父组件的fatherData变量会变成haha