vue.js中子组件向父组件传递数据
2017-10-11 本文已影响18人
痛心凉
子组件通过$emit方法向父组件发送数据,子组件在父组件的模版中,通过自定义事件接收到数据,并通过自定义函数操作数据
<div id="layout">
<h1>你好{{msg}}</h1>
<tm2 @fn="get"></tm2>
</div>
<template id="tm1">
<div>
<p>11111</p>
<slot name="aa"></slot>
</div>
</template>
<template id="tm2">
<div @click="send">
22222
</div>
</template>
<script type="text/javascript">
let tm2={
template:"#tm2",
data:function(){
return{
msg:"hello"
}
},
methods:{
send(){
//触发的事件名 fn触发的事件 向父组件传递的数据
this.$emit("fn",this.msg)
}
}
}
new Vue({
el:"#layout",
components:{tm2},
data:{
msg:""
},
methods:{
get(x){
this.msg=x
}
}
})
</script>