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

最新推荐文章于 2024-08-22 16:00:18 发布

安果移不动

最新推荐文章于 2024-08-22 16:00:18 发布

阅读量1k

点赞数

分类专栏： # vue

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

本文链接：https://blog.csdn.net/mp624183768/article/details/88095527

版权

vue 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

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

<!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>

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

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

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