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传给了父级

转载于:https://www.cnblogs.com/web-chuanfa/p/11151393.html