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.父子组件传值问题(子到父):子组件可以触发事件,把值传递到父组件。