<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
<script>
var A={
template:`
<div>
<span>我是组件A</span> -->{{a}}
<input type ="button" value ="把A数据传给C">
</div>
`,
data(){
return{
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是组件B</span> -->{{b}}
<input type ="button" value ="把B数据传给C">
</div>
`,
data(){
return{
b:'我是b数据'
}
}
};
var C={
template:`
<div>
<span>我是组件C</span> -->{{c}}
<input type ="button" value ="把C数据传给A">
</div>
`,
data(){
return{
c:'我是c数据'
}
}
};
var app =new Vue({
el:"#app1",
data:{
a:'我是父组件的数据'
},
/*//子组件,利用props进行数据传递:*/
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
</script>
</html>
案例基础页面:
展示结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
<script>
/*全局的*/
var vm =new Vue();
var A={
template:`
<div>
<span>我是组件A</span> -->{{a}}
<input type ="button" value ="把A数据传给B" @click="send">
</div>
`,
data(){
return{
a:'我是a数据'
}
},
methods:{
send(){
vm.$emit('a-msg',this.a)
}
}
};
var B={
template:`
<div>
<span>我是组件B</span> -->{{b}}
<input type ="button" value ="把B数据传给C">
</div>
`,
mounted(){
vm.$on('a-msg',function(a){
alert(a);
this.b =a;
/*将this绑定给当前函数,引用当前函数*/
}.bind(this));
},
data(){
return{
b:'我是b数据'
}
}
};
var C={
template:`
<div>
<span>我是组件C</span> -->{{c}}
<input type ="button" value ="把C数据传给A">
</div>
`,
data(){
return{
c:'我是c数据'
}
}
};
var app =new Vue({
el:"#app1",
data:{
a:'我是父组件的数据'
},
/*//子组件,利用props进行数据传递:*/
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
</script>
</html>
之前结果:
传递之后的值:
