本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。
1.获取父组件数据
疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢？
验证方法：
1.先在组件里面定义data 的数据，模版以及子组件
2.在子组件里面直接使用父组件里面的data数据
components:{ //父级组件
'aaa':{
template:'<h2>我是aa组件</h2><bbb></bbb>',
data(){
return {
msg:'我是父组件的数据'
}
},
components:{
'bbb':{//子级组件
template:'<h3>我是bbb-->{{msg}}</h3>'
}
}
}
结果:不能
实践结果是子级组件是不能直接获取父级的组件的数据
2.通过 props 从父级传递数据到子级
步骤：
1.子组件绑定父组件的数据
image.png
2.子组件里面传递别称的数据
image.png
3.子组件传递数据的类型声明
可以在props 声明传递的数据的类型，如
props:{
'mmm':String,
'num':Number
},
3.父组件获取子组件数据——> $emit()
实现步骤:
1.子组件 发送数据 vm.$emit('方法名'，'数据');
2.父组件 接收数据 v-on: @ 实现相关方法
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @msg-name='getData'></bbb>
</template>
代码：
<!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>
<style>
[v-cloak] { display: none }
/*#box{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}*/
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @msg-name='getData'></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<!--引入vue.js-->
<script src="../bower_components/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'body',
data:{
a:'aaa'
},
methods: {
},
// 第二个模版
components:{ //局部组件
'aaa':{
template:'#aaa',
data(){
return {
msg:'1255',
msg2:'我是父组件的数据'
}
},
methods:{
getData(msg){
// alert(msg);
this.msg =msg;
}
},
components:{
'bbb':{
//
props:['mmm','myMsg'],
template:'#bbb',
data(){
return{
cdmsg:'我是子组件的数据'
}
},
methods:{
send(){
// alert(2);
this.$emit('msg-name',this.cdmsg);
}
}
}
}
}
}
});
</script>
</body>
</html>
网友评论