<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app'>
<father></father>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script type="text/x-template" id="father">
<div>
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
</script>
<script type="text/x-template" id="child">
<div> {{'父组件传递的数据为:'+ myMessage }} </div>
</script>
<script>
Vue.component('father',{
template:'#father',
data:function(){
return {
parentMsg:''
}
}
});
Vue.component('child', {
props: ['myMessage'],
template: '#child'
});
new Vue({
el:'#app'
})
</script>
</html>