vue组件跟小程序组件用法的差异

1、Vue组件和小程序组件最基本的区别就在于它们的实现技术不同。Vue组件使用的是Web技术栈，而小程序组件则是基于微信小程序技术栈开发的。

2、小程序组件需要在页面的wxml文件中引入并使用，而Vue组件需要在Vue组件选项对象上进行注册，然后再在Vue模板中使用。

3、小程序组件的属性和事件是通过属性和事件绑定实现的，而Vue组件则是通过props和事件绑定实现的。

4、组件可以通过slot实现具名插槽，用于自定义组件的内容，而小程序组件没有类似的功能。

5、Vue组件还可以通过mixin混入、指令directive等方式实现更加灵活的编程和组件复用等功能。而小程序组件则只能通过内置组件、组件间通信接口等手段实现组件复用。

1、Vue组件：

假设我们有一个Vue组件，它是一个通用的计数器，其中有一个props属性count用于存储计数器值，还有两个事件increment和decrement用于实现计数器的增减功能。这个组件的实现方式如下：

<template>
  <div>
    <span>计数器值：{{ count }}</span>
    <button @click="$emit('increment')">+1</button>
    <button @click="$emit('decrement')">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true,
    },
  },
}
</script>

在Vue父组件中使用该组件的方式如下：

<template>
  <div>
    <count-component :count="count" @increment="incrementCount"
     @decrement="decrementCount" />
  </div>
</template>

<script>
import CountComponent from './CountComponent.vue'

export default {
  components: {
    CountComponent,
  },

  data() {
    return {
      count: 0,
    }
  },

  methods: {
    incrementCount() {
      this.count += 1
    },

    decrementCount() {
      this.count -= 1
    },
  },
}
</script>

在上面的代码中，我们引入了CountComponent组件，并在父组件中使用它。通过props和事件的绑定，我们让这个通用的计数器组件可以在不同的场景中使用。

2、小程序组件：

下面是同样的一个计数器组件，在小程序中的实现方式：

<!-- 在 wxml 中引入组件 -->
<view>
  <count-component count="{{ count }}" bind:increment="incrementCount" 
bind:decrement="decrementCount" />
</view>

// 在 js 中定义组件
Component({
  properties: {
    count: {
      type: Number,
      value: 0,
    },
  },

  methods: {
    incrementCount() {
      this.triggerEvent('increment')
    },

    decrementCount() {
      this.triggerEvent('decrement')
    },
  },
})

在小程序中，我们需要在wxml文件中使用自定义组件，并通过count属性和increment/decrement事件进行数据和事件绑定。组件的实现则需要定义在js文件中，通过Component进行注册和使用。