vue组件传参基本用法

---------------------------------------------------------------------------------父传子

父页面

<Child :title="msg"/>
data(){
return{
      msg:"这里有蛋糕,你要吗?"

}}

子页面

 接收父页面传来内容:{{title}}
 props:{
    title:{
      type:String,
      default:""
    }
  }

----------------------------------------------------------------------------------------子传父

子页面

 <button @click="sendMsg">响应数据</button>

 data(){
    return{
        info:"谢谢,那我不客气了"
    }
  },
 methods:{
    sendMsg(){
      this.$emit("info",this.info)
    }
  }

-----------------
父页面

{{info}}
<Child :title="msg"  @info="handlerMsg"/>

 data(){
    return{
        msg:"这里有蛋糕,你要吗?",
        info:""
    }
  },
 methods:{
    handlerMsg(data){
      alert("父页面:"+data);
      this.info = data;
    }
  }


猜你喜欢

转载自blog.csdn.net/qq_25635139/article/details/88094729
今日推荐