父组件：
<template>
<div id="secondcomponent">
<input type="" v-model="parentMsg">
<child :my-message="parentMsg"></child>
</div>
</template>
<script>
import child from '../components/Hello.vue'
export default {
data () {
return {
parentMsg: '父组件数据!可以根据input输入实时改变。'
}
},
components: {
child
}
}
</script>
子组件
<template>
<div class="hello">
{{myMessage}}
</div>
</template> <script>
export default {
name: 'child',
props: [
'myMessage',
],
mounted(){
console.log(this.myMessage);
}
}
</script>
给子组件传递数据使用v-bind动态绑定到子组件上!