ref属性
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式:
打标识:
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School>
获取:
this.$refs.xxx
<template><div>
<h1 v-text="msg"ref="title"></h1>
<button ref="btn”@click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch" id ="School"/></div>在这里添加id选择器的话，子组件的最大那个div会添加id ="School"
</template>
js
<script>
import School from './components/School"；//引入Schoo1组件
export default{
name:'App’，
components:{School},
data(){
return {
msg:"欢迎学习Vue!"
}
},
methods:{
showDoM(){
console.log(this.$refs.title) //真实DOM元素
console.log(this.$refs.btn)//真实DOM元素
console.log(this.$refs.sch)//School组件的实例对象(vc)
}
}
}
</script>
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后refs.input1 这样就可以减少获取dom节点的消耗了
用法如下:
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
也可以直接绑定组件：
//调用子组件
<filterdrug ref="filterdrug" @getGrugList="getGrugList":drugList4="drugList4"
@allDrug="allDrug" :drugType="drugType">
</filterdrug>
<el-button type="primary" style="margin-top:20px;" @click="changeModel('add',false)">新增药品</el-button>
changeModel(type, row) {
//父组件调用子组件的方法
( < any > this.$refs.filterdrug).changeModel(type, row);
}
element form表单：
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
<el-form label-width="120px" ref="ruleForm" :model="addDrug" :rules="rules">
<el-form-item label="商品名称：" prop="productName">
<el-input
v-model="addDrug.productName"
placeholder="请输入商品名称"
style="max-width:400px;min-width:200px"
></el-input>
</el-form-item>
<el-form-item label="通用名称：" prop="commonName">
<el-input
v-model="addDrug.commonName"
placeholder="请输入通用名称"
style="max-width:400px;min-width:200px"></el-input>
</el-form-item>
</el-form>
<script>
rules 绑定验证规则，prop绑定对应el-form-item的规则键名
rules = {
partnerName: [{ required: true, message: "请选择供应商",
trigger: ['blur', 'change']（change为检验的字符变化或者输入字符的时候，提示）}],
commonName: [{ required: true,//是否必填
message: "请输入批准文号", //错误提示信息
pattern: /^1[34578]\d{9}$/,//可以写正则表达式呦呦呦，
trigger: "blur" }] //检验方式（blur为鼠标点击其他地方，提示）
}
</script>
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<el-col :span="12" :offset="6">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input @change="inputchange" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="客户邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="客户年龄" prop="age" prop='age'>
<el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
age: '',
ruleForm: {//ruleForm可以直接定义一个空对象，不需要往里面赋值 ruleForm：{}
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
email: '',
age: '',
},
rules: {
age: [{
required: true,
message: '年龄不能为空'
},
{
type: 'number',
message: '年龄必须为数字值'
},
],
email: [{
required: true,
message: '请输入邮箱地址',
trigger: 'change'
},
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
name: [{
required: true,
message: '请输入活动名称',
trigger: 'change'
}],
region: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}],
date1: [{
type: 'date',
required: true,
message: '请选择日期',
trigger: 'change'
}],
date2: [{
type: 'date',
required: true,
message: '请选择时间',
trigger: 'change'
}],
type: [{
type: 'array',
required: true,
message: '请至少选择一个活动性质',
trigger: 'change'
}],
resource: [{
required: true,
message: '请选择活动资源',
trigger: 'change'
}],
}
};
},
methods: {
inputchange(){
console.log(this.ruleForm.name)
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if(valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>
</body>
网友评论