组件上用v-model实现子父传参父子传参

最新推荐文章于 2024-06-25 21:47:05 发布

MMNHD

最新推荐文章于 2024-06-25 21:47:05 发布

阅读量128

点赞数

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_63327154/article/details/125307396

版权

vue 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js中父子组件通信的常见方法，通过一个具体的例子展示了如何使用props、自定义事件和直接赋值来实现双向数据绑定。子组件通过updated方法更新父组件传入的值，并触发自定义input事件。同时，父组件通过v-model和监听input事件来同步子组件的值。

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

子组件

<template>
    <div>
    子组件表单
    <!-- 如果是原生dom事件,那么$event表示事件对象 -->
    <input type="text" :value="value" @input="updated">      
    </div>
</template>
<script>
export default {
    props: {
        value: {
            type:String
        }
    },
    methods: {
        updated(e) { 
            this.$emit('input',e.target.value)
        }
    },
}
</script>

父组件

<template>
    <div>
        <h1>测试父子组件之间的传值</h1>
        {{msg}}
        <input type="text" v-model="msg" id=""> <br>
    1<my-com :value="msg" @input="getV"></my-com>
    2<my-com v-model="msg"></my-com>
    <!-- 如果是原生dom事件,那么$event表示事件对象 -->
    <!-- 如果是自定义事件,那么$event表示$emit传递的值 -->
    3<my-com :value="msg" @input="msg=$event"></my-com>
    </div>
</template>
<script>
import MyCom from './MyCom.vue'

export default {
    components: { MyCom },
    data() { 
        return {
            msg:'888'
        }
    },
    methods: {
        getV(e) {
            this.msg=e
            
         }
    },
}
</script>