Components 在 Vue.js 中：创建、重用和数据传递

Components 是 Vue.js 中的一个重要概念，它允许您构建结构化且可维护的 Web 应用程序。 使用 components，您可以将应用程序分解为小的、独立的部分，每个部分负责用户界面的特定部分。

在本文中，我们将探讨如何 components 在 Vue.js 中创建、使用它们重用代码以及在 components. 我们将深入研究如何使用 props 将数据从父组件传递到子组件，以及使用事件将数据从子组件传递回其父组件。

 

1. 创造 Components

Components 在 Vue.js 中可以使用 `Vue.component` 方法或通过定义单文件来创建 components 。 

 例子： 

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. 组件结构

Vue 组件由模板、脚本和可选样式组成。 模板包含 HTML 标记，脚本包含组件选项（数据、方法、计算属性、生命周期挂钩），样式定义组件的外观。

例子：

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. 组件的可重用性

Components Vue.js 中的内容可以在您的应用程序中重用，减少代码重复并提高可维护性。 他们提倡模块化方法，允许您将较小的组件组​​合成 components 较大的组件。

例子：

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props 允许您将数据从父级传递 components 给子级 components。 Props 在子组件中声明，可以像常规数据属性一样使用。

例子：

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. 自定义事件

Components 可以发出自定义事件来与其父级进行通信 components。 家长 components 可以监听这些事件并做出相应的反应。

例子：

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

这些示例展示了 Vue.js 的关键概念 components，展示了它们的灵活性、可重用性和通信能力。 Components 帮助创建模块化且可维护的代码，使 Vue.js 成为构建可扩展应用程序的强大框架。