vue v-model 在props 中的使用子控件与父控件（一）

最新推荐文章于 2025-08-06 12:59:50 发布

原创最新推荐文章于 2025-08-06 12:59:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

独学而无友，则孤陋寡闻。q群582951247

vue 专栏收录该内容

106 篇文章

订阅专栏

本文探讨了Vue中父组件与子组件的数据同步问题，通过实例展示了如何使用v-model和props进行数据绑定，但发现子组件输入框无法实时更新父组件状态。文章留待下期解析解决方案。

学习博客之前我们先看要实现的效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>v-model-with-props</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
<div id="app">
    <p>Paent:{{message}}<input type="text" v-model="message"></p>
    <hr>
    <p>
        Child:
        <my-component :parent-message="message"></my-component>
    </p>

</div>
<script>
    Vue.component('my-component',{
        template:'  <span>{{parentMessage}}<input type="text" v-model="message"></span>',
        props:{
            parentMessage:String
        },
        data(){
            return{
                message:this.parentMessage
            }
        }

    });
    new Vue({
        el:'#app',
        data:{
            message:'hello',
        }
    });
</script>
</body>
</html>

当父组件输入框发生变化的时候，

子输入框并不会跟随变化，

如果我们想要他发生变化如何操作呢且听下回分解