vue 父子组件使用v-model通信
子组件:Vue.component('term-combo', {model: {prop: 'term',event: 'selectterm'},props: ['term', 'getall', 'defaultall'],data: function () {return {...
·
子组件:
Vue.component('term-combo', {
model: {
prop: 'term',
event: 'selectterm'
},
props: ['term', 'getall', 'defaultall'],
data: function () {
return {
items: [],
value: this.term
}
},
watch: {
term: function (newval) {
this.value = newval;
},
value: function (newval) {
this.$emit('selectterm',newval);
}
},
mounted: function () {
var that = this;
var url = '/Admin_Areas/query/ListTerm';
var p = {};
if (!this.getall) {
p.all = false;
}
$.post(url, p, function (res) {
that.items = res.rows;
that.items.unshift({
term: '',
termname: '所有学期'
});
if (!that.defaultall) {
if (!that.value) {
$.post('/admin_areas/query/GetDefaultTerm', function (res) {
that.value = res.data;
that.$emit('selectterm', that.value);
});
}
}
})
},
methods: {
getValue: function (val) {
this.value=val;
}
},
template: '<el-select v-model="value" clearable placeholder="请选择" v-on:change="getValue" size="mini">\
<el-option v-for="item in items" :key="item.term" :label="item.termname" :value="item.term">\
</el-option>\
</el-select>\
'
})
重点是两个地方:
model: {
prop: 'term',
event: 'selectterm'
},
watch: {
term: function (newval) {
this.value = newval;
},
value: function (newval) {
this.$emit('selectterm',newval);
}
},
data中使用value接收父组件传递的值,并将value使用v-model的方式绑定到下拉选择控件中
通过监听器监听到value发生变化时抛出selectterm事件
通过model中定义的event,在selectterm事件抛出后,将值传递到父组件绑定的变量中
调用示例:
<term-combo v-model="formsrh.term"></term-combo>
new Vue({
el: '#app',
data: function () {
return {
bg: '',
formsrh: {
term:''
}
}
},
methods: {
reset: function () {
this.bg = '';
this.formsrh.term = '';
},
test: function () {
console.log('值为', this.bg,this.formsrh);
}
}
});
除了使用监听器外,还可以使用计算属性来实现 ,示例:
Vue.component('spec-combo', {
model: {
prop: 'spec',
event: 'selectspec'
},
props: ['spec'],
data: function () {
return {
items: [],
specname: '',
defaultProps: {
children: 'children',
label: 'label',
value: 'id'
}
}
},
computed: {
value: {
get: function () {
if (!this.spec) {
return [];
}
var count = this.spec.length / 2;
var arr = [];
for (i = 1; i <= count; i++) {
var tm = this.spec.substr(0, i * 2);
arr.push(tm);
}
return arr;
},
set: function (newval) {
if (newval instanceof Array) {
var val = newval[newval.length - 1];
this.$emit('selectspec', val);
}
}
}
},
mounted: function () {
if (this.items.length == 0) {
var that = this;
var url = '/Admin_Areas/query/ListDepartTree';
$.post(url, function (res) {
that.items = res.data;
})
}
},
methods: {
handleNodeClick: function (data) {
//this.$emit('selectspec', data[data.length - 1]);
//this.value = data[data.length - 1];
//console.log(data);
},
},
template: '<el-cascader v-model="value" :options="items" :props="defaultProps" v-on:change="handleNodeClick" expand-trigger="hover" clearable change-on-select :show-all-levels="false" style="width:200px;" size="mini"></el-cascader>'
});
element的级联选择控件,model值是个数组,实际业务中,只需要选择的最低一级id,父组件传进id串,子组件在value的get方法中拆分此串组成个数组,set方法中取出最低级id抛出,将value设置为级联控件的model值,就可实现与父组件变量的绑定
调用:
<spec-combo v-model="formsrh.spec"></spec-combo>
data: function () {
return {
bg: '',
formsrh: {
spec: '010102',
term: ''
}
}
},
更多推荐
已为社区贡献11条内容
所有评论(0)