vue 在组件中打开一个组件
Vue open a component in a component
在 App.vue 中,我有一个用于打开组件的按钮。在组件 BigForm 中,我还有一个按钮可以打开一个名为 .但是当我打开组件时。 Vue 重新呈现带有警告的页面:
The "data" option should be a function that returns a per-instance value in component definitions.
App.Vue
<template>
<div id="app">
<button @click="showModal()">Show</button>
<BigForm v-if="modal" />
</div>
</template>
<script>
import BigForm from "./components/BigForm";
export default {
name: "App",
components: {
BigForm,
},
data() {
return {
modal: false,
};
},
methods: {
showModal() {
this.modal = !this.modal;
},
},
};
</script>
BigForm.vue:
<template>
<div class="hello">
<form style="height: 300px; width: 300px; background-color: green">
<button @click="showSmallForm()">Show small form</button>
<SmallForm
v-if="toggleSmallForm"
style="width: 100px; height: 100px; background-color: yellow"
/>
</form>
</div>
</template>
<script>
import SmallForm from "./SmallForm";
export default {
name: "HelloWorld",
components: {
SmallForm,
},
data() {
return {
toggleSmallForm: false,
};
},
methods: {
showSmallForm() {
this.toggleSmallForm = !this.toggleSmallForm;
},
},
};
</script>
和SmallForm.vue:
<template>
<form>
<input placeholder="Small form input" />
<button>This is small form</button>
</form>
</template>
这是我在 codesandbox 中的示例代码:
问题与 Vue 本身无关,而是 HTML。
当你在 <form>
中使用 <button>
时,按钮的默认 type
是 submit
(check this) - 当你点击按钮时,表单已提交到服务器,导致页面重新加载。
您可以通过显式设置类型 <button type="button">
(HTML 方式)或阻止默认操作(Vue 方式)<button @click.prevent="showSmallForm()">Show small form</button>
(参见 event modifiers)
另请注意,在另一个 <form>
中使用 <form>
是 not allowed in HTML
在 App.vue 中,我有一个用于打开组件的按钮。在组件 BigForm 中,我还有一个按钮可以打开一个名为 .但是当我打开组件时。 Vue 重新呈现带有警告的页面:
The "data" option should be a function that returns a per-instance value in component definitions.
App.Vue
<template>
<div id="app">
<button @click="showModal()">Show</button>
<BigForm v-if="modal" />
</div>
</template>
<script>
import BigForm from "./components/BigForm";
export default {
name: "App",
components: {
BigForm,
},
data() {
return {
modal: false,
};
},
methods: {
showModal() {
this.modal = !this.modal;
},
},
};
</script>
BigForm.vue:
<template>
<div class="hello">
<form style="height: 300px; width: 300px; background-color: green">
<button @click="showSmallForm()">Show small form</button>
<SmallForm
v-if="toggleSmallForm"
style="width: 100px; height: 100px; background-color: yellow"
/>
</form>
</div>
</template>
<script>
import SmallForm from "./SmallForm";
export default {
name: "HelloWorld",
components: {
SmallForm,
},
data() {
return {
toggleSmallForm: false,
};
},
methods: {
showSmallForm() {
this.toggleSmallForm = !this.toggleSmallForm;
},
},
};
</script>
和SmallForm.vue:
<template>
<form>
<input placeholder="Small form input" />
<button>This is small form</button>
</form>
</template>
这是我在 codesandbox 中的示例代码:
问题与 Vue 本身无关,而是 HTML。
当你在 <form>
中使用 <button>
时,按钮的默认 type
是 submit
(check this) - 当你点击按钮时,表单已提交到服务器,导致页面重新加载。
您可以通过显式设置类型 <button type="button">
(HTML 方式)或阻止默认操作(Vue 方式)<button @click.prevent="showSmallForm()">Show small form</button>
(参见 event modifiers)
另请注意,在另一个 <form>
中使用 <form>
是 not allowed in HTML