vue.js - How to make change in child components dynamically from parent in Vue.js
问题描述
I have a form that contains some custom components like custom-input
, custom-button
, etc. in my custom-form
component. My custom components (except custom-form
) contain a disabled
props. I want to set the disabled
props to true in all custom components when a submit button is clicked.
I need to do that dynamically and I don't know which custom components are used in a form. I also need to mention that, It is possible that I have more than one form on a page.
How can I handle that?
Here is what I've tried.
--- 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>
解决方案
道具!
// 主要组件/视图
<template>
<custom-form />
<custom-form />
</template>
<script>
import CustomForm from './CustomForm'
export default {
components: { CustomForm },
data() {
return {
disabled: false
}
},
methods: {
setDisabled() {
this.disabled = true
}
}
}
</script>
// CustomForm.vue
<template>
<form @submit.prevent="submit">
<custom-element :disabled="disabled" />
<custom-element :disabled="disabled" />
</form>
</template>
<script>
import CustomElement from './CustomElement'
export default {
data() {
return {
disabled: true
}
},
props: ['disabled'],
components: { CustomElement },
methods: {
submit() {
this.disabled = true
}
}
}
</script>
// 自定义元素.vue
<template>
<input :disabled="disabled" />
</template>
<script>
export default {
props: ['disabled']
}
</script>