vue.extend,mixins和vue.component的区别及说明
更新时间：2024年09月21日 14:36:24 作者：web_彭于晏
Vue.extend 创建Vue的子类,可视为组件构造函数,Vue.mixin 允许全局添加方法或属性,方便所有组件使用,Vue.component 是插件注册方法,通过Vue.extend创建的组件实例可以注册到Vue全局,使其在任何组件中可用
1.vue.extend
Vue.extend就是传入一下组件options，然后返回了一个Vue的子类，也可以看做是一个组件构造函数。
例子：
可以通过vue.component将这个vue子类注册到全局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>
<script>
/**
* 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。
* 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
* 最终还是要通过Vue.components注册才可以使用的。
*/
// 构建一个子组件
var todoItem = Vue.extend({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
})
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
})
// 注册到全局
Vue.component('todo', todoWarp)
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>2.vue.mixin
mixins可以全局添加一些方法或属性，方便所有组件调用。可以用来添加通用的对象引用和方法,
在混入的时候会先执行混入的created再执行组件里的created，当方法冲突时会使用当前组件里的
例子：
Vue.mixin({
data:{
//组件中可以使用this.$axios来调用axios的方法，十分方便
$axios: axios
},
methods: {
//每个组件从全局store中取出用户信息
getUser() {
return store.getters.user;
}
}
})3.vue.component
Vue.component是一个插件注册方法，就是把Vue.extend函数new出来的组件实例，注册到Vue的Options上。
本质是也就是在全局Vue实例的Options，添加了一个key/value，value就是组件实例。由于组件的
Options会继承Vue的Options，所以在任何组件中，都能调用该组件。
Vue.component('global-component', Vue.extend(baseOptions));这是原始的调用方式，用Vue.extend注册一个组件。
Vue内部对其进行了简化，可以省略调用Vue.extend，只传入Options就行了
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', baseOptions);总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决Vue axios post请求,后台获取不到数据的问题方法
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue项目中使用better-scroll实现一个轮播图自动播放功能
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果。这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。2018-04-04
本篇文章主要介绍了vue proxyTable 接口跨域请求调试的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
在使用Vue.js进行前端开发的过程中,Element UI 是一个非常流行的UI库,它提供了一套完整的组件来快速搭建美观的用户界面,但是我们经常遇到一个问题使用Element UI提供的el-date-picker组件时,尝试自定义其样式却无法生效,所以本文给大家介绍如何解决这个问题2024-10-10
本篇文章主要介绍了如何在 Vue.js 中使用第三方js库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
Vue2.0+ElementUI实现查询条件展开和收起功能组件(代码示例)
文章介绍了如何将查询条件表单封装成一个通用组件,以提高开发效率,组件支持多条件的折叠和展开功能,并提供了使用示例,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要为大家介绍了vue3中的透传attributes教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论