如何制作可重用的 vue js 組件？

Question

我是 Vue JS 的新手。 我創建了兩個不同的組件登錄和注冊，但使用相同的表單代碼我的意思是像 email 輸入和密碼輸入以及一個提交按鈕，我熟悉 Mixins，所以我創建了一個用於提交表單的 mixin，我在注冊和登錄

// 這是混音

data() {
    return {
      email: "",
      password: ""
    };
  },

  methods: {
    onSubmit() {
      console.log(this.email);
    },
  },

如何創建像這個 mixin 這樣的自定義可重用組件，所以我只想傳遞道具？ 下面是登錄表格和注冊表格是一樣的我不想重復

// 這是登錄組件

<v-form>

<v-text-field
type="email"
v-model="email"
label="E-Mail"></v-text-field>

<v-text-field
type="password"
v-model="password"
label="Password"></v-text-field>
<v-btn @click="onSubmit()" color="info">Submit</v-btn>

<script>
import CredMixin from "../mixins/Credentials";
export default {
  name: "Login",
  mixins: [CredMixin],
};
</script>

Answer 1

Vue 讓構建可重用組件變得非常簡單。

您可以在名為 customForm.vue 的組件文件夾中創建一個名為 form 的組件

在該文件中，您保存了該文件中組件所需的所有內容，因此它是自包含的。

<template> 
<v-form>

<v-text-field
type="email"
v-model="email"
label="E-Mail"></v-text-field>

<v-text-field
type="password"
v-model="password"
label="Password"></v-text-field>
<v-btn @click="onSubmit()" color="info">Submit</v-btn>
</template>
<script>
import CredMixin from "../path/to/your/mixin";
export default {
  name: "Login",
  mixins: [CredMixin],
};
</script>

然后在您的布局或視圖中導入組件。

從“@/components/customForm.vue”導入 customForm

然后像這樣在模板中使用它；

<custom-form></custom-form>

您還必須將其聲明為組件。

在布局或視圖的腳本中。

components: {
   customForm, 
}

然后您可以在兩種布局中使用該組件。 那么在任何這樣的布局中等等。

Answer 2

這個問題將通過在你的 mixin 中添加template屬性來解決。

不要在登錄和注冊組件中添加模板部分。

{
    template: `<v-form>

    <v-text-field
    type="email"
    v-model="email"
    label="E-Mail"></v-text-field>
    
    <v-text-field
    type="password"
    v-model="password"
    label="Password"></v-text-field>
    <v-btn @click="onSubmit()" color="info">Submit</v-btn>
    </v-form>
        `,

    data() {
       ...
      },
    
    methods: {
     ...
    },

}

另一種解決方案是使用slot 。

Answer 3

您可以在代碼中使用slot 。