然后你可以在模板中任何元素上使用新的 v-focus 属性:
选项合并
混合 (mixins) 是一种分发
Vue
组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
// 首先,定义一个混合对象
var mymixin = {
data:function(){
return {msg:false}
},
methods:{
show:function(){
this.msg=true
},
hide:function(){
this.msg=false
},
msgf:function(){
this.msg=!this.msg
}
}
}
var tpl1={
template:'#stpl1',
minins:[mymixin]
}
var tpl2={
template:'#stpl2',
minins:[mymixin]
}
// 如果我们需要在第一个组件定义data为true时,我们可以直接在组件内定义,他会覆盖mixin的data
var tpl1={
template:'#stpl1',
minins:[mymixin],
data:function(){
msg:true
}
}
例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue
mixins进行封装调用,以及继承,具体看代码。
duang —
一个小而简单的:chestnut:让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。
除了默认设置的核心指令( v-model 和 v-show ),Vue
也允许注册自定义指令。注意,在 Vue2.0
里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯
DOM 元素进行底层操作,这时候就会用到自定义指令。
全局混入
这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件,
在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险,
这违反了”DRY”的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且,
迫使维护人员, 甚至是你自己, 要首先理解这些props的上下文才能使用它,
这会让人非常失望.
<input v-focus>
也可以全局注册混入对象。注意使用! 一旦使用全局混入对象,将会影响到 所有
之后创建的 Vue 实例。使用恰当时,可以为自定义对象注入处理逻辑。
demo地址:
directives: {
focus: {
// 指令的定义---
}
}
您可能感兴趣的文章:
- Vue使用mixins实现压缩图片代码
- vue的mixins属性详解
- 详解Vue 中 extend 、component 、mixins 、extends
的区别 - 详解vue
mixins和extends的巧妙用法 - 详解Vue.js Mixins
混入使用 - 在Vue.js中使用Mixins的方法
- vue
mixins组件复用的几种方式(小结)
认识Mixins
例如:
注意以下三点:
//modal
const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
//tooltip
const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
使用场景:
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
const Modal = {
template: '#modal',
mixins: [toggle]
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle]
};
var tpl1={
template:'#stpl1',
data:function(){
return {msg:false}
},
methods:{
msgf:function(){
this.msg=!this.msg
}
}
}
var tpl2={
template:'#stpl2',
data:function(){
return {msg:false}
},
methods:{
show:function(){
this.msg=true
},
hide:function(){
this.msg=false
}
}
}
new Vue({
el:'#box',
components:{
tpla:tpl1,
tplb:tpl2,
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
Vue的Mixins是非常实用的编程方式,
因为最终实用的编程是通过不断减少运动部件(moving
parts)使代码变得容易理解. (关于这一点, Michael
Feathers有一个很好的引用). 一个mixin允许你封装一个功能,
以便你能在整个应用程序中的不同组件中使用它. 如果mixin被正确的创建,
它们是纯粹的–它们不会修改或更改函数的作用范围(scope)之外的内容, 因此,
您可以在多个地方执行它们, 并且只要输入值相同,
总是能非常可靠得得到相同的结果. 这真的非常强大.
也可以注册局部指令,组件中接受一个 directives 的选项:
2、同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
我们可以从中提取逻辑, 并创建可以复用的部分:
自定义指令
var mixin = {
data: function () {
return {
message: 'hello'
}
},
created:function(){
console.log('我是mixins中的created')
},
methods:{
show:function(num){
console.log(num) //mixins种的函数可以接收组件种的传参。
},
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
data: function () {
return {
title: 'def',
message: 'goodbye'
}
},
created: function () {
console.log('我是Vue中的created')
console.log(this.$data)
this.show(50); //可通过函数传参,把组件中需要的参数传给mixins进行使用。
},
methods:{
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
假设我们有一些不同的组件, 它们的工作是切换状态boolean,
一个模态(modal)和一个提示(tooltip).
这些tooltips和modals没有很多共同之处, 除了这个功能: 它们看起来不一样,
它们使用起来也不尽相同, 但是它们的逻辑是相似的 .
您可能感兴趣的文章:
- 详解Vue.js Mixins
混入使用 - 在Vue.js中使用Mixins的方法
- vue
mixins组件复用的几种方式(小结) - 谈谈vue中mixin的一点理解
3、值为对象的选项,例如 methods, components 和
directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能,
但是它们之间又有足够的不同的地方, 该如何选择呢?
我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件,
然后定义足够多的props以方便区分使用场景?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
//为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
混合 (mixins) 是一种分发 Vue
组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
1、当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。比如,数据对象在内部会进行浅合并
(一层属性深度),在和组件的数据发生冲突时以组件数据优先。
栗子
混合是什么
您可能感兴趣的文章:
- 详解Vue.js Mixins
混入使用 - 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
- vue
mixins组件复用的几种方式(小结) - 谈谈vue中mixin的一点理解
我们会发现,两个组件中的数据大多数相同,这是我们可以将它们进行混合