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的话,请点下推荐,谢谢!

  • 相关阅读:
    NDOC中文支持及入门用法
    网页代码常用小技巧
    SOCKET通讯点滴
    自动备份程序目录
    MySql.Data.dll Microsoft.Web.UI.WebControls.dll下载
    c#:获取IE地址栏中的URL
    比较好的单例登录模式(参考网友)
    FreeTextBox使用详解
    2005自定义控件显示基准线
    连接字符串大全
  • 原文地址:https://www.cnblogs.com/1rookie/p/8430439.html
Copyright © 2011-2022 走看看