Vue 创建组件的两种方法小结

在 Vue.js 中，有两种方式来创建组件，分别为注册全局组件和局部组件。下面我们进行详细讲解。

全局组件

在全局范围注册一个组件，使用 Vue.component 方法，内部是一个对象，该对象包括 template，data，methods 等属性。

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
Vue.component('my-component', {
  data: function() {
    return {
      title: '这是一个全局组件',
      content: '通过 Vue.component 方法创建的全局组件'
    }
  }
})
</script>

在注册完成组件之后，可以在 HTML 中使用组件，只需写上对应的标签即可，如下所示：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

局部组件

局部组件相对于全局组件来说，有更灵活的使用场景和更轻便的操作方式。

在父组件中，定义一个子组件，子组件也是一个对象，包括 template，data，methods 等属性。

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
var childComponent = {
  data: function() {
    return {
      title: '这是一个局部组件',
      content: '通过局部组件方式创建的子组件'
    }
  }
};
</script>

在父组件的 <template> 标签内，引用刚刚定义的子组件。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  components: {
    'child-component': childComponent  // 子组件在这里被调用
  }
}
</script>

示例说明

下面我们通过一个简单的示例来说明全局组件和局部组件的使用方法。

示例一：全局组件

<!DOCTYPE html>
<html>
<head>
  <title>Vue 全局组件示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

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

<script>
// 全局组件
Vue.component('my-component', {
  template: `
    <div>
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </div>
  `,
  data: function() {
    return {
      title: '这是一个全局组件',
      content: '通过 Vue.component 方法创建的全局组件'
    }
  }
})

new Vue({
  el: '#app'
})
</script>

</body>
</html>

上面的代码中定义了一个全局组件，并在 HTML 页面中通过 <my-component> 标签使用组件。

示例二：局部组件

<!DOCTYPE html>
<html>
<head>
  <title>Vue 局部组件示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

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

<script>
// 局部组件
var childComponent = {
  template: `
    <div>
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </div>
  `,
  data: function() {
    return {
      title: '这是一个局部组件',
      content: '通过局部组件方式创建的子组件'
    }
  }
};

new Vue({
  el: '#app',
  components: {
    'child-component': childComponent  // 子组件在这里被调用
  }
})
</script>

</body>
</html>

上面的代码中定义了一个局部组件，并在 HTML 页面中通过 <child-component> 标签使用组件。同时，我们在 Vue 实例中传入了定义好的组件，这样我们才能在 HTML 中使用组件。

以上就是 Vue 创建组件的两种方法，具体使用哪种方式，根据实际情况选择即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue 创建组件的两种方法小结(必看) - Python技术站