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

 

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

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

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

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