//组件穿透值传递
//允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
/*<uni-popup ref="popup" type="dialog" :maskClick="true">
<uni-popup-dialog
type="input"
message="成功消息"
:duration="2000"
:before-close="true"
@close="close"
@confirm="confirm">
</uni-popup-dialog>
</uni-popup>*/
//popup.js
const config={
// 顶部弹出
top:'top',
// 底部弹出
bottom:'bottom'
}
export default {
data(){
return {
config:config
}
}
}
//uni-popup
import popup from './popup.js'
export default { //注入一个依赖
props: {
maskClick:{
type: [ Number,String],
default: false
}
},
provide() {
return {
// 父组件中返回要传给下级的数据 eg:this.maskClick this.方法名
popup: this //子代可以同popup 来访问当前实例中的属性和方法
//将当前实例全部注入 后代
}
},
mixins: [popup],//混入
//mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,
//这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。
//Vue.mixin() 可以将自定义的方法混入所有的 Vue 实例中,谨慎使用
//全局注册一个混入,影响注册之后所有创建的每个 Vue 实例 ,全局混入接受一个对象
data() {
return {
otitle:"症状查询",
ntitle:"筛选"
};
},
methods:{
close() {
this.$emit('change', { //调用当前实例的方法 eg:关闭当前弹窗
show: false,
type: this.type
})
//可以访问config 混入
this.connfig.top ...
}
}
}
//uni-popup-dialog
//子代组件中
export default {
props: {
type: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: '请输入内容'
}
},
data() {
return {
};
},
inject: ['popup'],// 依赖 provide 的注入名
methods:{
close() {
this.popup.close() //调用uni-popup 的关闭弹窗时间
}
}
}
uniapp传值集(3)
最新推荐文章于 2023-06-27 17:56:54 发布