使用vue组件封装共用的组件

那么这里我将详细讲解一下使用Vue组件封装共用的组件的完整攻略。

前置知识

在学习使用Vue组件封装共用的组件前，需要掌握Vue基础知识和组件的使用方法。如果还没有掌握，可以先学习Vue教程以及组件的使用方法。

Vue组件封装共用的组件的步骤

下面是Vue组件封装共用的组件的步骤：

1. 创建共用的组件

首先需要创建共用的组件。这个组件应该是一个通用的组件，可以在不同的地方使用。在创建组件时，需要先确定组件的名称、属性和方法等。定义组件的方法有两种：

（1）全局组件

可以通过Vue全局方法Vue.component定义全局组件。例如，对于一个名为MyComponent的组件，就可以这样定义：

Vue.component('MyComponent', {
  // 组件选项
})

在上面的代码中，MyComponent表示组件的名称，后面的对象就是组件的选项。

（2）局部组件

可以在一个Vue实例中通过components选项定义局部组件。例如，一个名为ChildComponent的组件：

var vm = new Vue({
  el: '#app',
  components: {
    'ChildComponent': {
      // 组件选项
    }
  }
})

2. 使用共用的组件

创建共用的组件后，就可以在Vue模板中使用这个组件了。

（1）全局组件的使用

在全局组件中，可以直接在Vue模板中使用这个组件：

<div id="app">
  <my-component></my-component>
</div>

上面的my-component就是之前定义的全局组件的名称。

（2）局部组件的使用

在局部组件中，需要在模板中使用Vue组件的标签。

<div id="app">
  <child-component></child-component>
</div>

上面的child-component就是之前定义的局部组件的名称。

3. 封装共用的组件

下面是封装共用组件的步骤：

（1）确定需求

首先需要明确需要封装什么样的组件，这个组件应该具有哪些属性和方法。

以一个常见的组件——弹出框为例，需要考虑弹出框的宽高、标题、内容、关闭按钮等。

（2）编写模板

根据需求编写弹出框的模板。

<template>
  <div class="popup">
    <div class="popup__header">{{title}}</div>
    <div class="popup__body">{{content}}</div>
    <div class="popup__footer">
      <button @click="close">Close</button>
    </div>
  </div>
</template>

这里的模板使用了CSS类名，可以通过CSS样式对弹出框进行样式美化。

（3）编写组件

根据模板编写弹出框的组件。

Vue.component('popup', {
  // 属性列表
  props: ['visible', 'title', 'content', 'callback'],
  // 模板
  template: `
  <div v-show="visible" class="popup">
    <div class="popup__header">{{title}}</div>
    <div class="popup__body">{{content}}</div>
    <div class="popup__footer">
      <button @click="close">Close</button>
      <button @click="submit">Submit</button>
    </div>
  </div>
  `,
  // 方法
  methods: {
    close() {
      this.visible = false;
      this.callback && this.callback(false);
    },
    submit() {
      this.visible = false;
      this.callback && this.callback(true);
    }
  }
})

上面的代码中，定义了一个popup组件，包含了属性列表、模板和方法。可以根据需求自定义属性列表、方法。

（4）使用组件

使用组件只需要在Vue模板中加入组件标签即可。

<div id="app">
  <popup :visible="showPopup" :title="title" :content="content" :callback="callback"></popup>
</div>

在上面的代码中，通过visible、title、content、callback四个属性来控制弹出框。

下面是一个完整的示例说明：

示例1：全局组件

在这个示例中，我们将创建一个名为HelloComponent的全局组件，并在Vue模板中使用它。

1. 创建全局组件

定义HelloComponent组件：

Vue.component('HelloComponent', {
  template: '<div><p>Hello, {{name}}!</p></div>',
  props: ['name']
})

在上面的代码中，HelloComponent组件有一个属性name，用于显示Hello后面的名字。

2. 使用全局组件

使用HelloComponent组件：

<div id="app">
  <HelloComponent :name="'John'"></HelloComponent>
</div>

在上面的代码中，使用HelloComponent组件来显示Hello, John!。

示例2：局部组件

在这个示例中，我们将创建一个名为ChildComponent的局部组件，并在Vue模板中使用它。

1. 创建局部组件

定义局部组件ChildComponent：

var vm = new Vue({
  el: '#app',
  components: {
    'ChildComponent': {
      template: '<div><p>Child Component</p></div>'
    }
  }
})

在上面的代码中，ChildComponent组件只是简单地显示了一个文本字符串。

2. 使用局部组件

使用局部组件：

<div id="app">
  <ChildComponent></ChildComponent>
</div>

在上面的代码中，使用ChildComponent组件来显示Child Component的文本。