如何在 vuejs 中 $emit
how to $emit in vuejs
VueJS 发出不起作用,我正在尝试更改布尔值,但它不想发出更改
这是第一个组件:
<template>
<div id="reg">
<div id="modal">
<edu></edu>
</div>
<div :plus="plus" v-if="plus" @open="plus = !plus">
abc
</div>
</div>
</template>
脚本:
<script>
import edu from './education/edu.vue'
export default {
components: {
edu
},
data() {
return {
plus: false
}
}
}
</script>
发出的第二个组件:
<template>
<div id="container">
<h2>Education</h2>
<form action="">
<input type="text" class="input" placeholder="preparatory/bachelor/engineering..">
<input type="text" class="input" placeholder="University..">
<input type="text" class="input" placeholder="Where?..">
<h6>Start date</h6>
<input type="date" class="input" value="2017-09-15" min="2017-09-15" max="2021-09-15">
<div class="end-date">
<h6>End date</h6>
<div class="flexend">
<h6>present</h6><input type="checkbox" name="" id="checkbox" @click="checked">
</div>
</div>
<input type="date" class="input" v-if="show" value="2017-09-15" min="2017-09-15">
<div class="flex-end">
<button class="btn-plus" @click="$emit('open')"><i class="fas fa-plus"></i></button>
</div>
<div class="flex-end">
<button class="btn">next <i class="fas fa-arrow-right"></i></button>
</div>
</form>
</div>
</template>
脚本:
<script>
export default {
props:{
plus: Boolean
},
data(){
return{
show: true,
}
},
我认为这行得通,但似乎行不通
您应该使用组件名称而不是 div 元素:
<edu :plus="plus" v-if="plus" @open="plus = !plus">
abc
</edu>
VueJS 发出不起作用,我正在尝试更改布尔值,但它不想发出更改
这是第一个组件:
<template>
<div id="reg">
<div id="modal">
<edu></edu>
</div>
<div :plus="plus" v-if="plus" @open="plus = !plus">
abc
</div>
</div>
</template>
脚本:
<script>
import edu from './education/edu.vue'
export default {
components: {
edu
},
data() {
return {
plus: false
}
}
}
</script>
发出的第二个组件:
<template>
<div id="container">
<h2>Education</h2>
<form action="">
<input type="text" class="input" placeholder="preparatory/bachelor/engineering..">
<input type="text" class="input" placeholder="University..">
<input type="text" class="input" placeholder="Where?..">
<h6>Start date</h6>
<input type="date" class="input" value="2017-09-15" min="2017-09-15" max="2021-09-15">
<div class="end-date">
<h6>End date</h6>
<div class="flexend">
<h6>present</h6><input type="checkbox" name="" id="checkbox" @click="checked">
</div>
</div>
<input type="date" class="input" v-if="show" value="2017-09-15" min="2017-09-15">
<div class="flex-end">
<button class="btn-plus" @click="$emit('open')"><i class="fas fa-plus"></i></button>
</div>
<div class="flex-end">
<button class="btn">next <i class="fas fa-arrow-right"></i></button>
</div>
</form>
</div>
</template>
脚本:
<script>
export default {
props:{
plus: Boolean
},
data(){
return{
show: true,
}
},
我认为这行得通,但似乎行不通
您应该使用组件名称而不是 div 元素:
<edu :plus="plus" v-if="plus" @open="plus = !plus">
abc
</edu>