<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 子父组件间的数据传递</title>
<script src='vue.js'></script>
</head>
<body>
<script>
// 全局组件
// Vue.component('my-hello',{
// template:'<h1>hellow word!</h1>'
// })
window.onload=function(){
new Vue({
el:"#my",
data:{
title:'子调父' ,
},
// 局部组件
components:{
'parent':{
template:'#parent',
data(){
return{
page:12,
pname:'父组件',
cage:'',
cname:''
}
},
methods:{
getChild:function(age,name){
console.log(1111)
this.cage=age,
this.cname=name
}
},
components:{
'child':{
template:'#child',
data(){
return{
cage:10,
cname:'子组件'
}
},
props:['message','message1'],
methods:{
send:function(){
console.log(11)
this.$emit('e-child',this.cage,this.cname)
}
},
mounted:function(){
this.send()
}
}
},
}
}
})
}
</script>
<template id='parent'>
<div>
<p> 我是父组件访问自己的组件数据：年龄：{{page}},姓名：{{pname}}</p>
<p> 我是父组件访问子组件数据：年龄：{{cage}},姓名：{{cname}}</p>
<!-- 父组件中调用子组件中调用子组件 -->
<child :message="page" :message1="pname" @e-child='getChild'></child>
</div>
</template>
<template id='child'>
<div>
<p>我是子组件访问自己组件数据：年龄：{{cage}},姓名：{{cname}}</p>
<p>我是子组件获取父组件中的数据 年龄：{{message}},姓名：{{message1}}</p>
</div>
</template>
<div id='my'>
<!-- 父组件中已经调用了子组件 故此时调用父组件即可 -->
<parent ></parent>
</div>
</body>
</html>