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

巴特西

vue的props和$emit / 父子组件通信

最新文章

热门文章