混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。

当组件使用混入对象时,所以混入对象的选项将被混入该组件本身选项,当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合

当组件和混入对象数据发生冲突时组件数据优先

如:

var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
} new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})

同名钩子函数将混合为一个数组,都将被调用,混合对象的钩子将先调用,组件自身钩子后调用

var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
} new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
}) // => "混入对象的钩子被调用"
// => "组件钩子被调用"

因为混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。

所以对于混入对象可以放在一个js文件中封装然后引入组件

如:在src/common/js/mixins.js是编写混合的

export const playlistMinin = {
computed: {
//代码
}, mounted() {
//代码
},
methods: {
//代码
}
} export const playerMixin= {
computed: {
//代码
}, mounted() {
//代码
},
methods: {
//代码
}
}

在组件components/singer/singer.vue中使用上面的代码

<script type='text/ecmascript-6'>

import {playlistMinin,playerMixin} form '../../common/js/mixin';

export default{

  mixins:[playlistMinin,playerMixin],

}

</script>

vue混入(mixins)的更多相关文章

  1. Vue 混入(mixins)

    详细参考官方文档 基础 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. ...

  2. vue混入mixins时注意的问题

    mixin.js - 方式一:导出对象 const mixin = { mounted () { console.log('fffffffffffff') }, methods: { } } expo ...

  3. Vue 之 Mixins (混入)的使用

    是什么 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被合并到组件本身,也就是说父组件调用混入 ...

  4. Vue混入

    Vue 混入 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 数据对象合 ...

  5. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  6. vue2.0混入mixins

    假设一个项目,首页不需要登录就可以直接进入,但是在首页中有各种其他的模块,这些模块中,有些需要登录权限,而有些则不需要登录权限,所以在进入这些模块的时候,我们都要判断当前的登录状态,那么我们应该怎么组 ...

  7. 浅析vue混入(mixin)

    vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...

  8. vue混入 (mixin)的使用

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项. 使用示 ...

  9. vue 混入 mixin,自定义指令,过滤器

    vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = {  // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...

  10. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

随机推荐

  1. ruby 变量和方法

    def say_goodnight(name) result ="Good night ." +name return result end def say_goodmorning ...

  2. 在Oracle 12C中使用scott账号

    在Oracle11g中默认是有scott账号的,但在Oracle 12C中则不能直接使用. 我的机器环境: 操作系统:Windows Server 2008 R2 64位 Oracle版本:Oracl ...

  3. linux所有文件中查找关键字的命令

     grep 192.168.1.1 * -r    在所有文件中查找192.168.1.1

  4. Mat 类的内存管理

    使用 Mat 类,内存管理变得简单,不再像使用 IplImage 那样需要自己申请和释放内存.虽然不了解 Mat 的内存管理机制,也无碍于 Mat 类的使用,但是如果清楚了解 Mat 的内存管理,会更 ...

  5. 数组队列C++实现

    template <typename _T>class CArrayQueue {public:    CArrayQueue() {        m_rear = 0;        ...

  6. 序列化+fastjson和java各种数据对象相互转化

    序列化的定义 序列化就是一种用来处理对象流的机制 所谓对象流也就是将对象的内容进行流化.可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间. 序列化是将对象转换为容易传输的格式的过程 例 ...

  7. Mac常用开发工具

    1.svn客户端 SVN client SmartSVN 2.git客户端 SourceTree | Free Git GUI for Mac and Windows 3.远程windows系统工具( ...

  8. div 与 table 的优点

    div+css布局的好处: 1.符合W3C标准,代码结构清晰明了,结构.样式和行为分离,带来足够好的可维护性. 2.布局精准,网站版面布局修改简单. 3.加快了页面的加载速度(最重要的)(在IE中要将 ...

  9. AttributeError: ‘module’ object has no attribute ‘ximgproc’(OpenCV)

    问题描述: 使用opecv实现选择性搜索(selective search)的时候,执行如下代码时报了上述标题的错误. “ss = cv2.ximgproc.segmentation.createSe ...

  10. 与HDFS交互- By web界面

    开启方式 linux系统 eg :ubuntu 浏览器 eg:firefox HDFS的web管理界面地址:localhost:50070/ 具体理解有待后续学习....