再现vue组件
2017-10-26 本文已影响16人
哼_
点赞的组件
点一次就是点赞,再点一次就是取消点赞,不能多次点赞. 全局组件
<body>
<div id="app">
<like></like>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
//注册子组件
Vue.component("like",{
template : `
<div>
<button v-on:click="toggle_like()">点赞{{ like_count }}</button>
</div>
`,
data : function(){
return {
like_count : 288,
liked : false,
}
},
methods : {
toggle_like : function(){
if(!this.liked){
this.like_count++;
}else{
this.like_count--;
}
this.liked = !this.liked;
}
}
})
//初始化父组件
new Vue({
el:"#app",
})
</script>
-------------------------------------------------------------------------分割线-----------------------------------------------------------------
父子间通信
通过 props 通信,
<body>
<div id="app">
<alert msg="Yooooo"></alert>
<user username="whh"></user>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
Vue.component("user",{
template : `
<div>
<a :href="'/user/'+username">{{ username }}</a>
</div>
`,
props : ["username"],//如果没有props通信,页面上显示不了,拿不到username的值whh
data : function(){
return {
}
},
})
Vue.component("alert",{
template : `
<div>
<button v-on:click="alert()">弹弹弹</button>
</div>
`,
props : ["msg"],
data : function(){
return {
}
},
methods : {
alert : function(){
alert(this.msg)
}
}
})
//初始化父组件
new Vue({
el:"#app",
})
</script>
----------------------------------------------------------------------------分割线------------------------------------------------------------
子父通信
这个我觉得是有点绕的,在子组件里面触发父组件的show-balance事件,而这个事件链接的是一个真正的函数事件show_balance,这个函数改变了 v-if 的显示形态
仔细捋下来觉得写得很好,这样,子组件就能触发任意自定义事件了
<body>
<div id="app">
<balance></balance>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
// 两个component, 子向父喊话,父显示余额
//父组件
Vue.component("balance",{
template : `
<div>
<show @show-balance="show_balance"></show>
<div v-if="show">
您的余额: ¥98
</div>
</div>
`,
props : ["username"],
data : function(){
return {
show : false
}
},
methods:{
show_balance:function(data){
this.show = true;
console.log(1,data)
}
}
})
//子组件
Vue.component("show",{
template : `
<div>
<button v-on:click="on_click()">显示余额</button>
</div>
`,
// props : ["msg"],
data : function(){
return {
}
},
methods : {
on_click : function(){
this.$emit("show-balance",{a: 1, b: 2});
}
}
})
//初始化父组件
var parent = new Vue({
el:"#app",
})
</script>
平行组件通信
<body>
<div id="app">
<huahua></huahua>
<shuandan></shuandan>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
//两个component, 一个负责说,一个负责听
//子组件通过 事件的方式 向父组件喊话
var Event = new Vue();
Vue.component("huahua",{
template:`
<div>
我说:<input v-model="i_said" type="text" @keyup="onchange"/>
</div>
`,
data(){
return {
i_said : "",
}
},
methods:{
onchange: function(){
Event.$emit("huahua-said-something",this.i_said)
}
}
})
Vue.component("shuandan",{
template: `
<div>
花花说:{{ huahua_said }}
</div>
`,
data(){
return {
huahua_said: "",
}
},
mounted(){
//挂载完毕
var me = this;
Event.$on("huahua-said-something",function(data){
//console.log(data);
//console.log(this);
//任意组件之间的通信,要有一个调度器,由这个调度器去调度每一条事件
me.huahua_said = data;
})
}
})
//初始化父组件
var parent = new Vue({
el:"#app",
})
</script>
