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，虽然父组件传过来的值改变了，但是子组件不会自动更新。