详解vue.js数据传递以及数据分发slot
170 浏览量
2020-11-28
19:53:05
上传
评论
收藏 55KB PDF 举报
详解详解vue.js数据传递以及数据分发数据传递以及数据分发slot
一、组件间的数据传递一、组件间的数据传递
1.父组件获取子组件的数据
*子组件把自己的数据，发送到父级
*vm.$emit(事件名,数据);
*v-on: @
示例用法：当点击send按钮的时候，“111”变成“我是子组件的数据”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级获取子级的数据</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div>
<aaa>
</aaa>
</div>
<template>
<span>我是父级 -> {{msg}}</span>
//自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
<bbb @child-msg="get"></bbb>
</template>
<template>
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data:function(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
//这里的msg实际上就是子组件传递给父组件的数据
get:function(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data:function(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send:function(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
评论0