vue 父组件调用子组件数据
Posted zyb-722
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 父组件调用子组件数据相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="" id="myVue">
<my-component>
</my-component>
</div>
<!--子组件-->
<template id="child" >
<div id="">
<button v-on:click=‘senddata‘>传数据到父组件</button>
</div>
</template>
<!--父组件-->
<template id="father">
<div>
<h3>我是:{{str}}</h3>
<mycomponent-child v-on:showstrr="shouchilddata"></mycomponent-child>
</div>
</template>
</body>
<script type="text/javascript" charset="utf-8">
/*子组件传数据到父组件
* 1：子组件加事件eg：v-on:click=‘senddata‘
* 2：senddata方法中用this.$emit设置监听事件eg：this.$emit(‘showstrr‘,this.strr);
* showname是时间名，this.strr传入父组件的数据
3.父组件监听子组件触发的showname事件,然后调用shouchilddata方法获取子组件数据
* */
//注vue使用$emit时传入的事件名称只能使用小写，不能使用大写的驼峰规则命名
/*子组件*/
var child={
template:"#child",
data:function(){
return{
strr:"我是子组件数据"
}
},
methods:{
senddata:function(){
this.$emit(‘showstrr‘,this.strr);
}
}
}
/*父组件*/
var father={
template:"#father",
data:function(){
return{
str:"我是父组件数据"
}
},
methods:{
shouchilddata:function(data){
alert("父组件："+data)
},
},
components:{
"mycomponentChild":child
}
}
vm=new Vue({
//el:"#myVue",
components:{
"myComponent":father
}
}).$mount(‘#myVue‘);
</script>
</html>
以上是关于vue 父组件调用子组件数据的主要内容，如果未能解决你的问题，请参考以下文章