使用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
使用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>
);
},
![](https://i-blog.csdnimg.cn/blog_migrate/5f9871e7a8216136441caf39595371e0.png)
如果觉得文章不错,可以给小编发个红包给予鼓励.