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

     

  • 相关阅读:
    1.LOAM安装
    查看memcached运行状态
    (转)服务器故障排查,侵删
    百度地图tilesloaded只触发一次
    Linux 安装NVIDIA显卡
    Oracle常用sql(持续更新)
    jetBrain idea 常用插件整理
    关于swiper4 一个页面多个轮播的问题
    linux 日常工作常用软件(持续更新)
    WPS for Linux ,Linux平台最好的文档编辑软件,没有之一
  • 原文地址:https://www.cnblogs.com/liuliu-hai/p/11585339.html
Copyright © 2020-2023  润新知