我有一个组件是一个按钮，一个是 html。我需要从具有 v-if 条件的 html 组件中的按钮获取响应。如果按钮单击 true 附加 html。
<template>
<button v-on:click="greet">Greet</button>
</template>
<script>
export default {
data () {
return {
toggle: false,
}
},
mounted() {
console.log('Add more componente mounted.')
}
}
</script>
HTML 组件:
<template>
<div v-show='toggle' class="bg-white">
<div class="row">
<div class="col-md-5">
<h1>Title</h1>
....
.....
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
toggle: true
}
},
mounted() {
console.log('Add more componente mounted.')
}
}
</script>
如何获取/传递和使用html组件中的按钮响应，toggle: false,
最佳答案
您可以在父组件和子组件之间交换数据，使用 props 将数据从父组件发送到子组件，使用 this.$emit 事件将数据从子组件发送到父组件.
子按钮组件
<template>
<button v-on:click="greet">Greet</button>
</template>
<script>
export default {
props:[toggle:{type:boolean,default:false}]
data () {
return {}
},
methods:{
greet(){
this.$emit("btn-click");
}
}
,
mounted() {
console.log('Add more componente mounted.')
}
}
</script>和父html组件
<template>
<div v-show='toggle' class="bg-white">
<div class="row">
<div class="col-md-5">
<h1>Title</h1>
<your-btn :toggle="toggle" v-on:btn-click="greetFromBtn"/>
</div>
</div>
</div>
</template>
<script>
import yourBtn from 'pathToYourBtnComponent/yourBtn'
export default {
data () {
return {
toggle: true
}
},
components:{
yourBtn
},
methods:{
greetFromBtn(){
}
},
mounted() {
console.log('Add more componente mounted.')
}
}
</script>关于javascript - 如何组合两个组件 Vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52165035/