首页 > 代码库 > vue组件父子组件之间传递数据
vue组件父子组件之间传递数据
举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://www.mamicode.com/Vue.js"></script>
<template id="tpl1">
<h3>我是父组件 -->{{msg}}</h3>
<bbb @child-data="http://www.mamicode.com/get"></bbb>
</template>
<template id="tpl2">
<input type="button" value="http://www.mamicode.com/发送" @click="send()">
<h4>我是子组件 -->{{msg2}}</h4>
</template>
<script>
//子组件取父组件的数据
window.onload = function () {
new Vue({
el:"#div",
//局部小组件
components:{
‘aaa‘:{
data: function () {
return {
msg:‘我是父组件的数据‘
}
},
template:‘#tpl1‘,
methods: {
get: function (m) {
this.msg = m;
}
},
components:{
‘bbb‘:{
data: function () {
return {
msg2: ‘我是子组件‘
}
},
template:"#tpl2",
methods: {
send:function (){
this.$emit(‘child-data‘,this.msg2);
}
}
}
}
}
}
})
}
</script>
</head>
<body>
<div id="div">
<aaa></aaa>
</div>
</body>
</html>
vue组件父子组件之间传递数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。