VUE--mixins的一些理解。
概念:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
用法:
1、创建混入对象:在src
文件夹创建mixins文件夹,再在mixins文件夹下创建一个index.js
文件
// 创建一个需要混入的对象
export const mixinstest = {
data(){
return {
testMix: '混入对象的data'
}
},
created(){
console.log('这是混入对象的created')
},
methods:{
mixinsFun(){
console.log('调用混入对象的methods的函数')
}
},
computed:{
testMix2(){
return this.testMix+':这是混入对象计算结果。'
}
},
watch: {
testMix(newVal,oldVal){
console.log('混入对象的watch')
}
}
}
2、在组件内引入并引用混入
<template>
<div>
<div>{{testMix}}</div>
<div @click="mixinsFun">{{testMix}}</div>
<input type="text" v-model="testMix">
<div>{{testMix2}}</div>
</div>
</template>
<script>
import {mixinstest} from '../../mixins/index'
export default {
mixins: [mixinstest],
data (){
return {
testMix:'这是组件的数据'
}
},
created(){
console.log('这是组件的created')
},
methods: {
mixinsFun(){
console.log('调用组件的methods的函数')
}
},
computed:{
testMix2(){
return this.testMix+':这是组件计算结果'
}
},
watch: {
testMix(newVal,oldVal){
console.log('组件的watch')
}
}
}
</script>
<style> </style>
3、相关的解释
3.1 当在组件中和混入中有相同的‘testMix’这个数据时,显示组件中’testMix’对应的数据,当只用混入中有’testMix‘函数时,显示混入中’testMix’对应的数据。
3.2 在组件中和混入中有相同的函数mixinsFun()时,在组件中调用时,调用的是组件中的mixinsFun()函数,当只用混入中有mixinsFun()函数时,在组件中调用mixinsFun()是调用混入中的。
3.3 在组件中和混入中有相同的computed函数testMix2()时,在组件中调用时,调用的是组件中的testMix2()函数,当只用混入中有computed函数testMix2()时,在组件中调用testMix2()是调用混入中的。
3.4在组件中和混入中有相同的created()函数时,先执行混入中的created,再执行组件中的created。猜想其他生命周期也应该是一样。
3.5在组件中和混入中有相同的watch()函数testMix时,先执行混入中watch的testMix,再执行组件中watch的testMix。
VUE--mixins的一些理解。的更多相关文章
- Vue mixins(混入)
建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...
- _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
_ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- vue中keepalive怎么理解?---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- vue渐进式开发的理解和指令
1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...
- Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...
- vue mixins的使用
官网传送 刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来.mixns还是很好理解,简单很多了 就我目前理解mix ...
- vue mixins应用场景
学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了. 1.在assets文件夹下创建一个js文件 // 创建一个需要混入的对象 export const mixi ...
- 十、vue mixins 的用法
vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并) ...
随机推荐
- 安装sql server 2008重启失败
sql server2008安装时提示重启计算机失败怎么办 安装SQL Server 2008时,经常会遇到这样一个问题,软件提示“重启计算机失败”,如果忽略的话,会给后面的安装带来很大的麻烦,这 ...
- [GO]数组做函数参数
package main import "fmt" //数组为函数参数,实际上是值传递//实参数据里的每个元素,给形参数组拷贝一份//这里形参的数组其实就是实参的复制品 func ...
- Mac OS X 下android环境搭建
安装jdk6.0版本以支持eclipse的安装 安装eclipse 安装jdk8.0版本,实际开发中用到的jdk 配置java环境变量 打开shell命令窗口(终端) 检测输入java -versio ...
- 三羊献瑞——第六届蓝桥杯C语言B组(省赛)第三题
原创 三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 + 三 羊 献 瑞 ------------------- 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表 ...
- Listview 利用Datapager进行分页
原文:http://lgm9128.blog.163.com/blog/static/421734292010513111851101/ <asp:ListView ID="ListV ...
- 使用CodeMaid自动程序排版[转]
前言 「使用StyleCop验证命名规则」这篇文章,指引开发人员透过StyleCop这个工具,来自动检验项目中产出的程序代码是否合乎命名规则. [Tool] 使用StyleCop验证命名规则 但是在项 ...
- js定时执行函数
//方法一: //直接现定义函数 var time = window.setInterval(function(){ $('.lingdao_right').click(); },5000); //方 ...
- WPF的Image控件图片不能显示出来的问题探究
在wpf项目中,用Image来显示资源图片,在界面是可以显示,但是在运行的时候却显示不出来. <Image Source=" HorizontalAlignment="Lef ...
- linux 常用端口【转载】
原文地址: http://blog.csdn.net/u013943420/article/details/65938696 一个计算机最多有65535个端口,端口不能重复.这65536个端口被分为两 ...
- django中itsdangerous的用法
itsdangerous用来解决什么问题,为什么需要用到itsdangerous? 安装命令:pip install itsdangerous 有时候你想向不可信的环境发送一些数据,但如何安全完成这个 ...