vue2.0 改变子组件从父组件传递过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever
2018-02-09 10:04
1141 查看
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selectType"
实现vue2.0 饿了么过程中父组件food.vue像子组件ratingSelect.vue传递了selectType值之后,在子组件ratingSelect.vue中改变selectType的值会出现上述警告以下就是解决此问题:
父组件:food.vue
<rating-select :select-type="selectType"></rating-select>
mounted:function(){
Bus.$on("selectType",(selectType) =>{//子组件数据改变之后传递给父组件
this.selectType = selectType;
});
}
子组件ratingSelect.vue:在子组件声明一个中间变量typeSelect,避免直接改变父组件传递过来的selectType
props:{
selectType:{
type:Number,
default:All
}
},
data(){
return{
typeSelect:this.selectType
}
},
methods:{
select(type,_event){
if(!_event._constructed){
return;
}
this.typeSelect = type;
//通知父组件selectType修改
Bus.$emit("selectType",this.typeSelect);
}
},
以上也涉及到子组件怎样向父组件传递数据,通过一个空的Vue实例作为中央事件总线
具体实现如下:(在父子组件中各自引入)
import Vue from 'vue';
export default new Vue();
实现vue2.0 饿了么过程中父组件food.vue像子组件ratingSelect.vue传递了selectType值之后,在子组件ratingSelect.vue中改变selectType的值会出现上述警告以下就是解决此问题:
父组件:food.vue
<rating-select :select-type="selectType"></rating-select>
mounted:function(){
Bus.$on("selectType",(selectType) =>{//子组件数据改变之后传递给父组件
this.selectType = selectType;
});
}
子组件ratingSelect.vue:在子组件声明一个中间变量typeSelect,避免直接改变父组件传递过来的selectType
props:{
selectType:{
type:Number,
default:All
}
},
data(){
return{
typeSelect:this.selectType
}
},
methods:{
select(type,_event){
if(!_event._constructed){
return;
}
this.typeSelect = type;
//通知父组件selectType修改
Bus.$emit("selectType",this.typeSelect);
}
},
以上也涉及到子组件怎样向父组件传递数据,通过一个空的Vue实例作为中央事件总线
具体实现如下:(在父子组件中各自引入)
import Vue from 'vue';
export default new Vue();
相关文章推荐
- vue2.0 父组件给子组件传递数据的方法
- vue2.0子组件向父组件传递数据(饿了么例子)vue2.0废弃$dispatch,替换成$emit 和$refs
- vue2.0父子组件间传递数据的方法
- vue2.0中的组件通信2——子组件向父组件传递数据
- Vue2.0组件间数据传递示例
- vue2.0 子组件改变props值,并向父组件传值的方法
- Vue2.0组件间数据传递
- vue2.0 组件之间的数据传递
- vue2.0 子组件改变props值,并向父组件传值
- vue2.0 组件之间的数据传递
- vue2.0 兄弟组件数据传递方法
- Vue 2.0学习笔记:组件数据传递
- vue2.0 + vux (二)Footer组件
- vue组件传递对象中实现单向绑定的方法
- vue使用组件时,需要给传递的props属性默认值细节
- Vue2.0 进阶组件篇 5 解析 vux(无逢 marquee 组件)
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
- vue组件参数传递命名
- vue2.0组件之间的通信
- Vue.js 学习10 Element基于Vue2.0的组件库