|
vue开发中我们经常会使用或者开发一些组件，这篇文章我们就来聊聊组件之间的父子通信。
一、Props
这是官方的解释：Prop 是你可以在组件上注册的一些自定义 attribute；
在我们日常开发中使用的非常多，简单都说它就像是一个抽水机，可以把池子里的水抽到盆里。但不能逆向输出。
下面我们来看一个例子吧，(亲可复制代码执行哦)
<div id="app">
{{message}}
<br />
<button @click="saveMoney">存钱</button>
<!--银行卡组件-->
<card :deposit="money"></card>
</div>
<script>
//首先我们注册一个全局组件
//好比这是我们存钱的银行卡，每天努力工作赚钱存钱，娶媳妇儿
Vue.component("card",{
template:"<h1>￥:{{deposit}}</h1>",
props:[
"deposit"
],
data:function(){
return {
}
},
})
//每天努力工作
var vu = new Vue({
el:"#app",
data:{
message:"",
money:0,
},
created(){
this.message = "好好工作，赚钱钱";
},
computed:{
},
methods:{
//老板发工资啦，存钱事件
saveMoney:function(){
var money = this.money;
this.money = ++money;
}
}
})
</script>
?全局组件card中，我们通过porps接受在组件注册时自定义的任意的属性列表。动态传值只需要在属性名前加上v-bind即可
二、$emit?
触发当前实例上的事件。附加参数都会传给监听器回调。简单说就是我们可以在组件中自定义事件，子组件中使用 this.$emit 来调用。
?
<div id="app">
{{message}}
<br />
<button @click="saveMoney">存钱</button>
<!--银行卡组件-->
<card :deposit="money" @mycard="getMoney"></card>
</div>
<script>
//首先我们注册一个全局组件
//好比这是我们存钱的银行卡，每天努力工作赚钱存钱，娶媳妇儿
Vue.component("card",{
template:"<div><h1>￥:{{deposit}}</h1>" +
"<button @click='payMoney'>存钱通知</button></div>",
props:[
"deposit"
],
data:function(){
return {
}
},
methods:{
payMoney(){
var param = {
"money":1000,
"msg":"已存入1000元整"
};
this.$emit("mycard",param);
}
},
})
//每天努力工作
var vu = new Vue({
el:"#app",
data:{
message:"",
money:0,
},
created(){
this.message = "好好工作，赚钱钱";
},
computed:{
},
methods:{
//老板发工资啦，存钱事件
saveMoney:function(){
var money = this.money;
this.money = ++money;
},
getMoney(ev){
console.log(ev);
}
}
})
</script>
三、ref通信
ref 是用来给DOM或者子组件注册应用信息，父组件中可以直接使用 this.$refs.componentName调用子组件中的方法或data数据。
|