在页面上半部分有一个输出框,可以输入传递的值,下部分是文本显示。
效果显示:
这是<body>
<body>
<div id="app">
<wen></wen>
</div>
<template id="parent">
<div>
<input v-model="value" />
<ipp v-bind:value="value" ></ipp>
</div>
</template>
<template id="son">
<div>
传递的值是:{{value}}分
</div>
</template>
</body>
script组件内容
<script>
vue = new Vue({
el:'#app',
components:{
'wen':{
template:"#parent",
data(){
return{
value:''
}
},
components:{
"ipp":{
template:"#son",
props:["value"]
}
}
},
}
})
</script>
最后别忘记了导vue的js