1.父子组件传值问题(父到子):
如 Aipreview.vue 文件(父组件): 父组件传递值-->>子
<template>
<div>
<MyHeader :somedata="some_data" @self_event="fun1"> </MyHeader> /*父组件 通过属性直接传递 */
</div>
</template >
<script>
import MyHeader from "@/components/MyHeader";
export default {
components: { MyHeader },
data: function() {
return {
some_data: {
name: "ss",
age: 12
}
};
},
method:{
fun2:function(data1,data2){
console.log(data1,data2)
}
},
mounted:function(){
//如果有异步操作区更新 this.some_data;那么somedata的项,一定要全部写出来,不然对象不会更新
}
};
</script>
子组件:MyHeader.vue( 子组件接收值)
<template>
<div>
<span class="spans" @click="update_pra">{{aa}}</span>
</div>
</template >
<script>
import MyHeader from "@/components/MyHeader";
export default {
props: { /*子组件通过属性来接收值,在此属性跟 data使用地位相等*/
somedata: {
type: {
type: String,
default: "OCT"
}
}
},
data: function() {
return {
aa: "可以触发父组件",
sub_data:"i am from sub"
};
},
method:{
update_pra:function(param){
this.$emit("self_event",param,this.sub_data)
}
},
mounted: function() {
}
};
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.父子组件传值问题(子到父):子组件可以触发事件,把值传递到父组件。