您的当前位置:首页正文

Vue的provide/inject,mixins混入,slot插槽用法学习

2024-11-08 来源:个人技术集锦

1.provide / inject

(1)provide和inject需要一起使用,以允许其祖先组件向其所有子孙后代注入一个依赖,不论层次有多深

(2)provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性;

element的form里面代码如下:

element的formItem的代码如下:


(3)inject 选项应该是 一个字符串数组 或者一个对象,

在element的input中的代码如下:在input中,使用this.elForm即可得到当前form的this,使用this.elFormItem可获取到当前formItem的this。

2.mixins(混入)

mixins 选项接受一个混入对象的数组;例如element中的formItem中的emitter;


emitter对应的值为:

这样在formItem中,可以通过this.dispatch()调用dispatch方法,可以通过this.broadcast()调用broadcast方法;相当于formItem组件的methods中增加了dispatch和broadcast方法;

tip: 如果混入的是生命周期函数,则会先调用混入的生命周期函数,在调用组件自身的生命周

期函数。

3.slot插槽的用法

(1)<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

(2)没有name的slot:

如果组件a为:


则使用a组件的时候,a组件包裹的内容将替换<slot></slot>;如下图:<button>测试按钮</button>将替换slot;


(3)有name的slot:

如果组件a为:

则使用a组件的时候,只有使用v-slot:testSlot时,a组件包裹的内容将替换<slot name="testSlot"></slot>;如下图:<button>测试按钮</button>将替换slot;


tip: v-slot命令只能用于component或者template;


显示全文