<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
/*全局組件*/
Vue.component('Parent',{
data(){
return{
msg:'父組件信息!'
}
},
template:`
<div>
<p>父組件</p>
<Child v-bind:childDate="msg" @changeParentValue="changeParentValue"/>
</div>
`,
methods:{
changeParentValue(val){
console.log(val);
}
}
});
Vue.component('Child',{
template:`
<div>
<p>子組件</p>
<input type="text" v-model="childDate" @input="changeValueToParent(childDate)"/>
</div>
`,
props:['childDate'],
methods:{
changeValueToParent(val){
//console.log(val);
this.$emit('changeParentValue',val);
}
}
});
/*局部組件*/
var AppTemp = {
data(){
return{
}
},
template: `
<div>
<Parent />
</div>
`
};
new Vue({
el:'#app',
data(){
return{
}
},
components:{
AppTemp:AppTemp
},
template:`<AppTemp />`
});
</script>
</html>
