在Vue中，组件和插件是两个不同的概念。

组件是Vue中的基本构建块，用于将应用程序拆分成可重用和独立的部分。组件可以包含模板、数据和行为，并可以通过props接受父组件的数据。组件通常作为标签使用，可以在应用程序中多次重复使用。

插件是一个可以向Vue添加全局功能或者给Vue实例添加功能的对象。插件通常包含一个install方法，用于将插件安装到Vue中。插件可以添加全局指令、全局过滤器、混入、实例方法等。插件的作用域通常是全局的，可以在整个应用程序中使用。

下面是一个组件和插件的示例代码：

<template>
  <div>
    <hello-world name="Vue"></hello-world>
    <p>{{ message | capitalize }}</p>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { capitalize } from './filters'
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'hello world'
    }
  },
  filters: {
    capitalize
  }
}
</script>

在这个示例中，HelloWorld组件是一个可重用的组件，可以在应用程序中多次使用。capitalize过滤器是一个局部过滤器，可以在当前组件中使用。

如果我们想在整个应用程序中使用capitalize过滤器，可以将它定义为一个全局过滤器：

// filters.js
export function capitalize(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
}
// main.js
import Vue from 'vue'
import App from './App.vue'
import { capitalize } from './filters'
Vue.filter('capitalize', capitalize)
new Vue({
  render: h => h(App),
}).$mount('#app')

如果我们想在整个应用程序中使用一个自定义指令，可以将它定义为一个插件：

// directives.js
export const myDirective = {
  bind(el, binding, vnode) {
    el.style.color = binding.value
  }
}
// main.js
import Vue from 'vue'
import App from './App.vue'
import { myDirective } from './directives'
Vue.directive('my-directive', myDirective)
new Vue({
  render: h => h(App),
}).$mount('#app')

现在我们可以在应用程序中使用<div v-my-directive="'red'"></div>指令了。