父传子 : 子组件接收变量名=父组件传递的数据
如：:f-cmsg="fmsg" 注意驼峰问题
子传父：@子组件关联的方法名 = 父组件接受的方法名
如：@func="getmsg"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件相互传递数据</title>
<link rel="icon" sizes="any" href="../img/2.png" >
<!--<link rel="icon" sizes="any" href="../img/2.png">-->
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
h4{
color: red;
}
</style>
</head>
<body>
<div id="box">
<p>父组件</p>{{fmsg}}<br/>
子组件传过来的元素:<h4>{{zCmsg}}</h4>
<!--父传子 :接受变量名 注意驼峰问题 :接收变量名=传递的数据 如：:f-cmsg="fmsg"-->
<!--子传父：@关联方法名 = 接受方法名 如：@func="getmsg"-->
<re :f-cmsg="fmsg" @func="getmsg"></re>
</div>
<template id="t1">
<div>
<!--通过点击事件触发发送父标签的信息-->
<button @click="setmsg">发送给父组件的数据</button>
<p>子组件</p>{{zmsg}}<br/>
父组件传过来的元素:<h4>{{fCmsg}}</h4>
</div> </template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
fmsg:"我是父标签的数据",
zCmsg:""
},
methods:{
//接受子数据的方法 括号中为传递过来的参数 ,个数由传递参数来决定
getmsg:function(m){
this.zCmsg=m;
},
},
//局部组件
components:{
re:{
template:"#t1",
//接受父标签传递过来的数据 【】中为传递过来的数据可直接使用
props:['fCmsg'],
data:function(){
return {
zmsg:"我是子标签的数据",
}
},
methods:{
//点击事件
setmsg:function(){
//this.$emit(关联方法，传递数据1...)
this.$emit("func",this.zmsg);
},
}
}
}
});
</script>
</body>
</html>