vue中switch开关控制其他组件的禁用状态

vue中switch开关控制其他组件的禁用状态

在switch组件里，绑定v-on事件，通过change来对isDisabled函数中disabled的值进行取反，另一个组件的disabled属性绑定isdisabled，就可以在switch开关中修改其他组件的disabled属性来

<template>
	<div id="app">
		<el-form ref="form" :model="form">
			<el-form-item label="dhcp">
				<el-switch v-model="value" @change="isDisabled" :inactive-text="关闭" :active-text="打开"></el-switch>
				<span >打开</span>
			</el-form-item> 
			<el-form-item v-model="form.ip" label="ip" >
				<el-input filterable :disabled="isdisabled"></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default {
	name: "app",
	data(){
		return{
			isdisabled:false,
			form:{
				ip:''
			}
		}
	},
	methods:{
		isDisabled(){
			this.isdisabled = !this.isdisabled;
			this.$emit('change',event)
		}
	}
}
</script>
<style scoped>

</style>