vue组件的开发方式有哪些

使用Vue.extend来创建全局的Vue组件

//main.js
var component = Vue.extend({
  template:'<h3>这是Vue.extend创建的组件</h3>'
})
Vue.component('myComponent', component)

//或者
Vue.component('mycom1', Vue.extend({
  template:'<h3>这是使用Vue.extend创建的组件</h3>'
}))

new Vue({
  el: '#app',
  render: c => c(app)
})

//app.vue
<div>
<my-component></my-component>
<mycom1></mycom1>
</div>

在app.vue中不需要引入，就可以直接使用全局的注册组件

 

使用Vue.extend创建业务组件

//index.js
import Vue from 'vue'
import Index from './index.vue'

const MockConstructor = Vue.extend(Index)

const $init = (opts={}) => {
    const vm = new MockConstructor({
        data:opts//初始化data
    })
    vm.$mount()
    document.getElementsByTagName('body')[0].appendChild(vm.$el)//也可以加入指定的dom节点
//    当然在vm挂载完成后，也可以在这里调用组件内部的方法
  //  例如，监听一个方法，展示组件
     chatCLI.on('onApplause', (res) => {
      vm.showIt()//showIt为组件内的method
    })
}
export {
    $init
}

//index.vue
<template>
    <div>
        this is Index.vue
    </div>
</template>

　　

引入方式

const mock = require('@packages/mock')
  mock.$init()
  //或者使用懒加载
  const mock = await import(/* webpackChunkName: "mock" */ '@packages/mock')
  mock.$init({})

　　

直接向外暴露js/vue

//index.js
import index from './index.vue'

export default index

//index.vue
<template>
    <div>
        this is Index.vue
    </div>
</template>

使用 template元素，定义组件的html模板结构

//html
<div id="app"></div>
<template id="tmp1">
    <div>
      <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
      <h4>好用，不错</h4>
    </div>
  </template>


//main.js
Vue.component('mycom3',{
  template:'#tmp1'
})


//app.vue
<div>
<mycom3></mycom3>
</div>

 如何使用Vue.use

Vue.use()是为Vue插件（需要依赖vue才能实现）进行初始化的，而axios不用依赖vue也能执行，所以不需要使用Vue.use()进行初始化。

//index.js
import Loading from './loading.vue'
export default {
    install(Vue,options) {
        Vue.component('loading', Loading);
    }
}

//loading.vue
<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>
 
<script>
    export default {
        props: ['show', 'text']
    }
</script>

//main.js
import Loading from './components/index'
Vue.use(Loading)

如果要在vue的原型上挂载是怎么实现的呢？

//toast.js
import Toast from './toast.vue'
 
export default {
    install(Vue, options) {
        // 生成一个Vue子类
        const toast = Vue.extend(Toast);
 
        // 生成该子类的实例
        let toastInstance = new toast();
        console.log(toastInstance);
 
        // 将实例挂载到新创建的div上
        toastInstance.$mount(document.createElement('div'));
 
        // 将此div加入全局挂载点内部,#app下方
        console.log(toastInstance.$el);
        document.body.appendChild(toastInstance.$el);
 
        // 通过Vue注册一个原型方法
        // 所有实例共享这个方法
        Vue.prototype.$toast = (msg, duration = 2000) => {
            toastInstance.message = msg; 
            toastInstance.show = true;
            setTimeout(()=>{
                toastInstance.show = false;
            }, duration);
        }
    }   
}


//toast.vue
<template>
    <transition name="fade">
        <div class="toast" v-show="show">
            {{message}}
        </div>

    </transition>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                message: "提示框"
            };
        }
    };
</script>

<style scoped>
    .toast {
        position: fixed;
        top: 40%;
        left: 50%;
        margin-left: -15vw;
        padding: 2vw;
        width: 30vw;
        font-size: 4vw;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5vw;
        z-index: 999;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: 0.3s ease-out;
    }

    .fade-enter {
        opacity: 0;
        transform: scale(1.2);
    }
    .fade-leave-to {
        opacity: 0;
        transform: scale(0.8);
    }
</style>

//main.js
import Toast from './components/toast'
Vue.use(Toast)

//app.vue中使用
 mounted() {
    this.$toast('this is toast', 30000)
  }

render函数编写vue组件

render函数生成的内容相当于template的内容，故使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。

//parent.vue
<template>
    <div>
      <child1 :level='level'>我是标题</child1>
    </div>
  </template>
  <script>
    const child1 = () => import("./child1.vue");
    export default {
      components: { child1 },
      data() {
        return {
          level: 2
        };
      },
    };
  </script>

//child.vue
<script>
    export default {
      props: {
        level: {
          require: true,
          type: Number,
        }
      },
      render(createElement) {
        return createElement('h' + this.level, this.$slots.default);
      }
    };
  </script>

//app.vue
 <parent></parent>
 
components: { 
    parent:() => import('./components/parent.vue')
  },

再举例一个

//child.vue
<script>
export default {
 props: {
  type: {
   type: String,
   default: 'normal'
  },
  text: {
   type: String,
   default: 'normal'
  }
 },
 computed: {
 },
 render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },
methods: { handleClick() { console.log('-----------------------'); console.log('do something'); } } }; //app.vue   

　　https://cn.vuejs.org/v2/guide/render-function.html 参数说明

使用jsx语法编写组件

安装babel插件

npm i babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props -D
或者
 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D

　　

编辑.babelrc文件

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
或者
{
    presets: ["@vue/babel-preset-jsx"]
 }

render() {
 return (
  <div
   class={{
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   }}
   onClick={this.handleClick}>
   {this.text}
  </div>
 );
},

如果觉得文章不错,可以给小编发个红包给予鼓励.