zoukankan      html  css  js  c++  java
  • vue的props和$emit / 父子组件通信。别看其他人的了,我这个例子清晰,肯定可用的。

    props

    父级:

    父级组件中引用子组件,并将自己data下面的giveChild数据绑定在  giveChildData  传给子

     <myChild :giveChildData="giveChild">{{isMe}}</myChild>
    
    
    data(){
    return{
    giveChild:'222'
    }
    },
    components:{
      myChild
    }
     

    子级:

    通过props接收父级传来的数据

    props:{
          giveChildData:{
             type:String
          }
    }

    子组件将接收到的数据显示在自身模板中

    <div>{{giveChildData}}</div>

    效果:

    $emit

     子元素上的点击事件成功后,通过 $emit 将事件和数据发射出去

     <div @click="sendChildData">点我将子的数据传给父级</div>
    data(){
           return{
             childData:111
           }
         },
    methods:{
           sendChildData(){
              this.$emit('sendChildData',this.childData)
           }
         }

    父级:

    父级接收到事件后,走自己的事件 getChildData并进行相关处理、显示。

    <myChild :giveChildData="giveChild" @sendChildData="getChildData"></myChild>
        <div>这是子级传过来的数据 ——> {{isMe}}</div>
    data(){
          return{
            giveChild:'222',
            isMe:''
          }
        },
    
        methods:{
          getChildData(data){
            this.isMe = data;
          }
        },
        components:{
          myChild
        }

    效果:子把自己的childData传给了父级

    觉得OK的话,请点下推荐,谢谢!

  • 相关阅读:
    ARM的存储器映射与存储器重映射
    Nand Flash与Nor
    内核 任务的堆栈切换
    Linux设备模型(总结)
    file结构体中private_data指针的疑惑
    Sysfs文件系统与Linux设备模型
    认识udev
    Linux操作系统下的常见系统资源共享
    linux下的udev是干嘛的,能否说的通俗点
    udev详解
  • 原文地址:https://www.cnblogs.com/1rookie/p/8430439.html
Copyright © 2011-2022 走看看