У меня есть форма, содержащая некоторые пользовательские компоненты, такие как custom-input
, custom-button
и т.д. c. в моем custom-form
компоненте. Мои пользовательские компоненты (кроме custom-form
) содержат реквизиты disabled
. Я хочу установить для реквизита disabled
значение true во всех настраиваемых компонентах при нажатии кнопки отправки.
Мне нужно делать это динамически, и я не знаю, какие настраиваемые компоненты используются в форме. Я также должен упомянуть, что, возможно, у меня есть более одной формы на странице.
Как я могу с этим справиться?
Вот что я пробовал.
--- Main Component ---
<template>
<div>
<slot />
</div>
</template>
<script>
export default {
}
</script>
--- Component1 ---
<template>
<div>
<span v-if="!disabled">this is Comp1</span>
</div>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
}
}
}
</script>
--- Component2 ---
<template>
<div>
<span v-if="!disabled">this is Comp2</span>
</div>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
}
}
}
</script>
--- My directive ---
import Vue from 'vue'
Vue.directive('disable', {
bind: (el, binding, vnode) => {
methods.setChildrent(vnode.context.$children, binding.value)
}
})
const methods = {
setChildrent(children, value) {
children.forEach(element => {
this.setChildrent(element.$children, value)
if(element.$options.propsData)
if ('disabled' in element.$props)
element.$props.disabled = value
})
}
}
--- Page ---
<template>
<MainComp v-disable="true">
<Comp1></Comp1>
<Comp2></Comp2>
</MainComp>
</template>
<script>
import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.vue'
import MainComp from './MainComp.vue'
import Directives from '../directives/index.js'
export default {
name: 'HelloWorld',
components: {
Comp1,
Comp2,
MainComp,
},
directives: {
Directives
},
props: {
msg: String
},
methods: {
},
mounted() {
}
}
</script>