父组件不能直接获取子组件中的数据,只能通过子组件发送时间的方式传递数据
1:在子组件中定义发送方法 例如:this.$emit('ve',this.name,this.address,this.sex) 第一个参数是事件名称,后面的参数是要发送的数据
2:在掉用子组件的地方设置绑定 例如<my-vue2 @ve='getData'></my-vue2> 've'是步骤一中的第一个参数,‘getdate'是接收数据的方法
3:在父组件中定义接收数据的方法 例如:getData(children_name,children_address,children_sex) 参数和步骤1中的数据参数要一一对应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test">
<my-vue1></my-vue1>
</div>
<template id="vue1">
<div>
<p>这是父组件</p>
<p>姓名是:{{name}} 地址:{{address}} 性别:{{sex}}</p>
<p>子组件的数据: {{children_name}}{{children_address}}{{children_sex}}</p>
<my-vue2 @ve='getData'></my-vue2> <!-- 步骤2:调用的父组件中调用的子组件中设置接收事件匹配 -->
</div>
</template>
<template id="vue2">
<div>
<p>这是子组件</p>
<p>姓名是:{{name}} 地址:{{address}} 性别:{{sex}}</p>
<input type="button" value="向父组件发送数据" @click='send()'>
</div>
</template>
<script>
new Vue({
el:"#test",
components:{
'my-vue1':{
methods: {
getData(children_name,children_address,children_sex){ //步骤3:在子组件中定义接收方法
this.children_name=children_name;
this.children_address=children_address,
this.children_sex=children_sex;
}
},
template:'#vue1',
data() {
return {
name:'张三',
address:'上海',
sex:'男',
children_name:'',
children_address:'',
children_sex:''
}
},
components:{
'my-vue2':{
template:'#vue2',
data() {
return {
name:'李四',
address:'北京',
sex:'女'
}
},
methods: {
send(){
this.$emit('ve',this.name,this.address,this.sex) //步骤1在子组件中定义发送方法
}
},
}
}
}
}
})
</script>
</body>
</html>