手写vue 组件demo

1  vue组件主要是使用vue.use进行加入js文件调用install方法

2 main.js使用

import a from './a'
Vue.use(a, {
  a: 1
})

3  a目录下index.js的方法

import button from './button.vue'
export default { 
  install (Vue, options) {  //options就是vue.use的第二个参数
    console.log('options: ', options);
    Vue.component('VueButton', button)
  }
}

4 vue组件

<!--  -->
<template>
  <div>
    <button>{{name}}</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "xcq"
    }
  },
  data () {
    return {

    };
  },
  computed: {},
  beforeMount () { },
  mounted () { },
  methods: {},
  watch: {}

}

</script>

<style lang='' scoped>
</style>