子组件传递给父组件
子组件传递给父组件:通过$emit触发事件;
首先需要先在子组件中定义要出发的事件:
<script>
export default {
// 数组写法
// emits:["add","sub","addN"],
// 对象写法的目的是为了进行参数的验证
emits:{
add: null,
sub: null,
addN: (num,name,age) =>{
console.log(num,name,age);
if (num>10){
return true;
}
return false;
}
}
</script>
在子组件中为按钮设置监听,在方法中触发事件传递给父组件:
<template>
<div>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
methods: {
increment(){
console.log("+1");
this.$emit("add");
},
decrement(){
console.log("-1");
this.$emit("sub");
}
},
}
</script>
在父组件中监听子组件的事件,并作出处理:
<template>
<div>
<h2>当前计数{{counter}}</h2>
<counter-opetation
@add="addOne"
@sub="subOne"
@addN="addNNum">
</counter-opetation>
</div>
</template>
<script>
import CounterOpetation from "./CounterOperation.vue";
export default {
components:{
CounterOpetation
},
data(){
return {
counter:0
}
},
methods: {
addOne(){
this.counter++;
},
subOne(){
this.counter--;
}
},
}
</script>
在自定义的事件中,还能够传递参数:
// 子组件
<template>
<div>
<input type="text" v-model.number="num">
<button @click="incrementN">+n</button>
</div>
</template>
<script>
export default {
// 数组写法
// emits:["add","sub","addN"],
// 对象写法的目的是为了进行参数的验证
emits:{
add: null,
sub: null,
addN: (num,name,age) =>{
console.log(num,name,age);
if (num>10){
return true;
}
return false;
}
},
data(){
return{
num:0
}
},
methods: {
incrementN(){
console.log("add",this.num);
this.$emit("addN",this.num,"sk",18);
}
},
}
</script>
// 父组件
<template>
<div>
<h2>当前计数{{counter}}</h2>
<counter-opetation
@add="addOne"
@sub="subOne"
@addN="addNNum">
</counter-opetation>
</div>
</template>
<script>
import CounterOpetation from "./CounterOperation.vue";
export default {
components:{
CounterOpetation
},
data(){
return {
counter:0
}
},
methods: {
addNNum(num,name,age){
this.counter+=num;
}
},
}
</script>