效果图
点击弹弹弹
点击a标签
点击显示余额
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.liked{
background:#a10;
}
</style>
</head>
<body>
<div id="app">
<alert msg="自定义的提示"></alert>
<br>
<user username="dashuaibi"></user>
<br>
<balance></balance>
<br>
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
//自定义弹窗信息
Vue.component('alert',{
template:'<button @click="on_click">弹弹弹</button>',
props:['msg'],
methods:{
on_click:function(){
alert(this.msg);
}
}
});
//自定义的连接
Vue.component('user',{
template:'<a :href="\'/user/\'+username">@{{username}}</a>',
props:['username'],
});
//两个自定义组件之间使用
Vue.component('balance',{
template:'<div><show @show-balance="show_balance"></show><div v-if="show">您没钱了!!囧!!</div></div>',
methods:{
show_balance:function(data){
this.show=true;
console.log('data:'+data);
}
},
data:function(){
return{
show:false
}
}
});
Vue.component('show',{
template:'<button @click="on_click()">显示余额</button>',
methods:{
on_click:function(){
this.$emit('show-balance',{a:1,b:2});
}
}
});
new Vue({
el:'#app'
})
任意及平行组件通信 效果图:
下方的显示随着上方的输入变化
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.liked{
background:#a10;
}
</style>
</head>
<body>
<div id="app">
<tieniu></tieniu>
<afei></afei>
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
//中心的事件调度器
var Event=new Vue();
Vue.component('tieniu',{
template:'<div>我说:<input @keyup="on_change" v-model="i_said"/></div>',
data:function(){
return {
i_said:'',
}
},
methods:{
on_change:function(){
Event.$emit('SaidS',this.i_said)
}
}
})
Vue.component('afei',{
template:'<div>tieniu说:{{tieniu_said}}</div>',
data:function(){
return {
tieniu_said:'',
}
},
//钩子,节点
mounted:function(){
var me=this;
Event.$on('SaidS',function(data){
me.tieniu_said=data;
});
}
})
new Vue({
el:'#app'
})