vue子组件数据跟着父组件改变

父组件的代码

<template>

    <div class="home">

        <img alt="Vue logo" src="../assets/logo.png">

        <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->

        父组件的值<input type="text" v-model="parentVal">

        <div>

            <child-test :inputData="parentVal"></child-test>

        </div>

    </div>

</template>

<script>

    // @ is an alias to /src

    import HelloWorld from '@/components/HelloWorld.vue'

    import ChildTest from '@/components/child-test.vue'

    export default {

        name: 'home',

        components: {

            HelloWorld,ChildTest

        },

        data() {

            return {

                parentVal: 100,

            }

        },

    }

</script>

 

子组件的代码

<template>

    <div class="child">

        子组件<input type="text" v-model="childVal">

    </div>

</template>

<script>

    export default {

        name: 'child',

        props: {

            inputData: {

            }

        },

        data() {

            return {

                childVal: this.inputData

            }

        },

        watch: {

            inputData(newVal){

                this.childVal = newVal;

            }

        }

    }

</script>

 

总结：父组件通过props传值给子组件，子组件通过watch监听父组件传过来的值改变来重新更新子组件的值。以此来达到子组件的值跟随父组件的值改变。如果不使用watch，虽然父组件传过来的值改变了，但是子组件不会自动更新。