vue组件的开发方式有哪些

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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)
})
?
1
2
3
4
5
//app.vue
<div>
<my-component></my-component>
<mycom1></mycom1>
</div>
在app.vue中不需要引入，就可以直接使用全局的注册组件
 

使用Vue.extend创建业务组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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
}
?
1
2
3
4
5
6
//index.vue
<template>
    <div>
        this is Index.vue
    </div>
</template>

　　

引入方式
?
1
2
3
4
5
const mock = require('@packages/mock')
  mock.$init()
  //或者使用懒加载
  const mock = await import(/* webpackChunkName: "mock" */ '@packages/mock')
  mock.$init({})

　　

直接向外暴露js/vue

?
1
2
3
4
5
6
7
8
9
10
11
//index.js
import index from './index.vue'
 
export default index
 
//index.vue
<template>
    <div>
        this is Index.vue
    </div>
</template>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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()进行初始化。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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的原型上挂载是怎么实现的呢？
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//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标签去掉。只保留逻辑层。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//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')
  },

再举例一个

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//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
   }
  });
 },<br>methods: { handleClick() { console.log('-----------------------'); console.log('do something'); } } }; //app.vue   

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

使用jsx语法编写组件

安装babel插件
?
1
2
3
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文件
?
1
2
3
4
5
6
7
8
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
或者
{
    presets: ["@vue/babel-preset-jsx"]
 }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
 );
},

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

posted @   地铁程序员  阅读(1337)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示