vue.js - vuejs组件内的props的属性赋值问题?
本文介绍了vue.js - vuejs组件内的props的属性赋值问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
组件:<test :loading.sync="loading"></test>
Vue.component('test',{
template: '#testText',
props: {
loading: {
type: Boolean,
default: false
}
},
methods: {
getData: function (data) {
this.loading = false;//此句有错误,该如何更正
}
}
});
new Vue({
el: '#indexBox',
data: {
loading : false
},
methods : {
loadMore: function () {
this.loading = true;
}
}
});
我想在子组件里面变更loading的值回传给父组件,请问该如何控制loading
解决方案
你用的是vue2吧,如果是vue2的话就应该用事件来把子组件的状态传给父组件,有两种办法,一种是在父组件中传一个v-model="outerLoading"
,然后子组件里面
watch:{
outerLoading: {
immediate: true,
handler() {
this.innerLoading = v
}
},
innerLoading (v) {
this.emit('input', v)
}
}
这样outLoading就会响应innerLoading,实现双向绑定的功能。
还有一种做法和这个类似,就是把this.emit('input', v)
换成this.emit('eventName', v)
,然后在父组件中@eventName="eventFunc"
, 再通过父组件中的eventFunc(v) { //code... }
来响应子组件的状态
这篇关于vue.js - vuejs组件内的props的属性赋值问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文