父子组件的传值
(一) 父组件给子组件传值
1.父组件传递
- 父组件在调用子组件的位置,添加一个自定义属性, 属性的值就是父组件传入子组件的值
- 如果属性值是一个变量,或布尔类型的数据,或数值类型的数据, 该自定义属性需要使用绑定属性v-bind
2.子组件接收
- 在子组件定义的位置,添加一个
props
选项 - 选项的值默认是一个数组,数组的元素就是:
父组件在调用子组件的位置定义的属性名
- 这样就可以在子组件中通过自定义属性名访问父组件传入的数据了
3.props选项内接收到的父组件传过来的数据,可以进行一些自定义配置
- 首先将props的值改为对象,对象的key:自定义的属性名,对象的value:对象
- 这个对象就是当前接收到数据的配置对象
- 配置选项有:
- type:数据类型
- default:默认数据
- required:当前数据为必传数据
(二) 子组件给父组件传值
- 准备好要送的数据
- 在父组件调用子组件的位置,给子组件添加自定义事件(自定义事件名不能使用现有名称)
- 在父组件实例内部定义事件处理方法,方法的的参数会接收子组件的数据
- 在子组件的实例内部,使用this.$emit(自定义事件名, 数据)的方式触发自定义事件,并发送数据)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{border:solid 1px black;padding: 10px;margin: 10px;}
</style>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>我是:{{name}}</p>
<c></c>
</div>
</body>
<script src="vuue.js" type="text/javascript" charset="utf-8"></script>
<template id="kx">
<div>
<h2>我是:{{name}}</h2>
<p>我有什么:{{a}}</p>
<child1></child1>
<child2></child2>
</div>
</template>
<template id="yx">
<div>
<h3>我是:{{name}}</h3>
<p>我有什么:{{a}}</p>
</div>
</template>
<template id="yz">
<div>
<h3>我是:{{name}}</h3>
<p>我有什么:{{a}}</p>
<p>我拿到了儿子的:{{b}}</p>
<child :abc="a" v-on:myeve="getData"></child>
</div>
</template>
<template id="ql">
<div>
<h4>我是:{{name}}</h4>
<p>我有什么:{{a}}</p>
<p>收到了父级的:{{abc}}</p>
</div>
</template>
<script type="text/javascript">
let temp1 = {
template:"#ql",
data(){
return {
name:"乾隆",
a:"手机"
}
},
props:["abc"],
created(){
this.$emit("myeve", this.a)
}
}
let temp2 = {
template:"#yx",
data(){
return {
name:"胤祥",
a:"大众"
}
}
}
let temp3 = {
template:"#yz",
data(){
return {
name:"雍正",
a:"黄浦区的房子",
b:""
}
},
components:{
child: temp1
},
methods:{
getData(v){
console.log(v);
this.b = v;
}
}
}
let temp4 = {
template:"#kx",
data(){
return {
name:"康熙",
a:"翡翠白菜"
}
},
components:{
child1: temp2,
child2: temp3
}
}
var vm = new Vue({
el:"#app",
data:{
title:"hello component",
name:"努尔哈赤",
a:"江山"
},
components:{
c:temp4
}
})
// 努尔哈赤
// 康熙
// 雍正
// 乾隆
// 胤祥
</script>
</html>