二、组件
- 全局及局部组件
<div id="seg1">
<alert></alert>
<alert></alert>
<alert></alert>
<alert></alert>
</div>
var Alert = {
template: '<button @click="on_click">弹弹</button>',
methods: {
on_click: function () {
alert("哈哈");
}
}
};
new Vue({
el:'#seg1',
components:{
alert:Alert
}
});
- 配置组件
点赞的实现：
<div id="seg1">
<like>aa</like>
<!--//第二种方法：
<template id='tem'>-->
<!--<button :class="{liked:liked}" @click="toggle_like()">赞{{like_count}}</button>-->
<!--</template>-->
</div>
var Like = {
template: '<button :class="{liked:liked}" @click="toggle_like()">赞{{like_count}}</button>',
// template:'tem',
data:function(){
return {
like_count:5,
liked:false
}
},
methods: {
toggle_like: function () {
if(!this.liked){
this.like_count++;
}
else {
this.like_count--;
}
this.liked = !this.liked;
}
}
};
new Vue({
el:'#seg1',
components:{
like:Like
}
});
- 组件通信之父子通信
(1) 父子通信
- props：
<alert msg="耀武扬威"></alert>
var User = {
template: '<button @click="on_click">弹弹</button>',
props:['msg'],
methods: {
on_click: function () {
alert(this.msg);
},
}
};
new Vue({
el:'#seg1',
components:{
user:User
}
});
- 在当前页面中点击某链接，进入到该链接的主页(思路)：
<user username="whh"></user>
var User = {
template:'<a :href="\'/user/\' +username">@{{username}}</a>',
props:['username'],
methods: {
}
};
new Vue({
el:'#seg1',
components:{
user:User
}
});
(2) 子父通信
// 父组件balance
Vue.component('balance',{
template:`
<div>
<show @show-balance="show_balance"></show>
<div v-if="show">
您的余额是35
</div>
</div>
`,
methods:{
show_balance:function(data){
this.show=true;
console.log=('data:',data)
}
},
data :function(){
return{
show:false //默认值
}
},
});
// 子组件show
Vue.component('show',{
template:'<button @click="on_click()">显示余额</button>',
methods:{
on_click() {
this.$emit('show-balance',{a:1,b:2})
}
}
});
new Vue({
el:'#seg1'
});
自己敲几遍才懂，父组件是用于显示的，子组件是点击的。
当点击子组件，触发事件，绑定showbalance，在父组件的方法中定义；当点击之后，判断数据真假，默认是false；
（子的showbalance调用父级的，点击按钮触发onclick，click中监听的showbalance，参数直接进入父级）
- 组件通信之任意及平行组件通信
出错了两次，主要是用$emit和$on进行平行组件的 传值。
var Event = new Vue();
Vue.component('gaga',{
template:`
<div>我说:
<input @keyup="onchange" v-model="i_said"/>
</div>
`,
methods:{
onchange:function(){
Event.$emit('gaga_said_something',this.i_said);//error:没加this
}//error:{{}}
},
data:function(){
return{
i_said:'',
}
}
})
Vue.component('a',{
template:`<div>嘎嘎说:{{gaga_said}}</div>`,
data:function(){
return{
gaga_said:'',
}
},
mounted:function(){
var that = this;
Event.$on('gaga_said_something',function(data){
that.gaga_said = data;
})
}
})
new Vue({
el:'#seg1'
});
