父组件中:
<template>
<dynamic-form v-model="testModel" />
</template>
<script>
import dynamicForm from '@/components/dynamicForm/index'
export default {
name: 'VueElementAdminMasterDform',
components: { dynamicForm },
data() {
return {
testModel: 'Init Value'
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
子组件：
对应代码：
<template>
<div>
<el-input v-model="newValue" />
</div>
</template>
<script>
export default {
name: 'DynamicForm',
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: ''
}
},
computed: {
newValue: {
get({ value }) {
return value
},
set(newVal) {
this.$emit('change', newVal)
}
}
}
}
</script>
provide/inject
element-ui源码中的input-number组件中
当使用element-ui中有button组件的时候，当在Form组件使用button的时候他的尺寸会受到外层的FormItem组件以及更外层的Form组件的size属性的影响。
常规情况可能想到让props从From开始，一层层往下级添加属性，但是存在层级关系不确定的情况，使用props就会出现强耦合的情况。
这个时候使用provide/inject，向后代注入组件本身（上下文），后代就可以无视层级任意访问祖先组件中的状态
