vue整理日常。

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.父子组件传值问题（子到父）：子组件可以触发事件，把值传递到父组件。