vue父子组件通信
组件通信之子传父
- 使用模板标签建立模板
<!-- 使用模板标签定义模板 -->
<template id="tm">
<div>
<table border="0" cellspacing="0" cellpadding="5">
<thead>
<caption>{{title}}</caption>
<tr>
<th></th>
<th>客户编号</th>
<th>客户姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="cus in content" align="center">
<td><input type="radio" name="customer"/></td>
<td>{{cus.id}}</td>
<td>{{cus.name}}</td>
<td>{{cus.sex}}</td>
<td>{{cus.age}}</td>
</tr>
</tbody>
</table>
</div>
</template>
注:上述代码中的{{title}} 和 {{content}} 分别为父组件中向该子组件所要传递的数据
- 定义子组件
//定义子组件
const com={
template:"#tm",//指向模板标签的id属性
props:['title','content'],//定义属性
data(){//向父组件要传递的数据
return {
ckCus:-1
}
}
};
注:上述代码中定义了一个ckCus,这是要向父组件传递数据时要传递的数据,并在子组件中使用v-model绑定在单选按钮上
3.调用父组件方法
<my-com @myclick="checkedCustomer"></my-com>
<button @click="$emit('myclick',ckCus)">确定</button>
methods:{
checkedCustomer(id){ //提供给子组件调用的方法
this.ckedCus=this.customers.filter(cus=>cus.id==id)[0];
}
}
注意事项:
1、在子组件上绑定自定义事件 myclick
2、在父组件中编写myclick绑定的方法 checkedCustomer
3、在子组件中使用 $emit(‘自定义事件名’,传递参数值) 方法,可以调用父组件方法并传递参数
组件通信之父传子
- 使用属性传递
props:['title','content'],
data:{
title:"客户列表", //模板标题
customers:[ //模板内容:向子组件传递的数据
{id:1001,name:"Job",sex:"男",age:20},
{id:1002,name:"Tom",sex:"女",age:23},
{id:1003,name:"Peter",sex:"男",age:21},
{id:1004,name:"Alice",sex:"女",age:19},
{id:1005,name:"Mark",sex:"男",age:25},
],
ckedCus:null
},
<!-- 使用组件并向子组件传递数据 -->
<my-com :title="title" :content="customers" @myclick="checkedCustomer"></my-com>
说明:
1.在子组件中定义属性title和content
2.在父组件中定义数据
3.在子组件中通过属性将数据进行绑定
效果如图:
父组件如何使用子组件的属性和方法?
<my-com @click="cl" ref="child"></my-com>
methods:{
cl(count){
console.log(count,this.$refs.child.count++);//使用子组件的属性
}
}
说明:在子组件使用 ref 属性,可以将子组件对象绑定到 $refs 对象中,因此可以通过该对象去获取子组件的属性或调用子组件中的方法。
总结
本文主要讲解了vue中组件之间通信的方法,子组件向父组件传递数据可以使用 $emit() 方法去调用父组件中的方法,父组件向子组件传递数据可以通过属性的方式传递。以及,父组件如需使用子组件的属性和方法,可以通过 $refs对象去访问。
最后,如需了解更多关于vue.js的知识,可以到vue.js的官网学习。
本次内容的源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件通信之子传父</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 使用组件并向子组件传递数据 -->
<my-com :title="title" :content="customers" @myclick="checkedCustomer"></my-com>
<!-- 根据子组件传递的id显示信息 -->
<p>选择的客户:{{ckedCus==null ? "未选择" : ckedCus.name}}</p>
</div>
<!-- 使用模板标签定义模板 -->
<template id="tm">
<div>
<table border="0" cellspacing="0" cellpadding="5">
<thead>
<caption>{{title}}</caption>
<tr>
<th></th>
<th>客户编号</th>
<th>客户姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="cus in content" align="center">
<td><input type="radio" name="customer" :value="cus.id" v-model="ckCus" /></td>
<td>{{cus.id}}</td>
<td>{{cus.name}}</td>
<td>{{cus.sex}}</td>
<td>{{cus.age}}</td>
</tr>
<tr>
<td colspan="5"><button @click="$emit('myclick',ckCus)">确定</button></td>
</tr>
</tbody>
</table>
</div>
</template>
</body>
<script type="text/javascript">
//定义子组件
const com={
template:"#tm",
props:['title','content'],
data(){
return {
ckCus:-1
}
}
};
let vm=new Vue({
el:"#app",
data:{
title:"客户列表", //模板标题
customers:[ //模板内容:向子组件传递的数据
{id:1001,name:"Job",sex:"男",age:20},
{id:1002,name:"Tom",sex:"女",age:23},
{id:1003,name:"Peter",sex:"男",age:21},
{id:1004,name:"Alice",sex:"女",age:19},
{id:1005,name:"Mark",sex:"男",age:25},
],
ckedCus:null
},
components:{
myCom:com,
},
methods:{
checkedCustomer(id){ //提供给子组件调用的方法
this.ckedCus=this.customers.filter(cus=>cus.id==id)[0];
}
}
});
</script>
</html>