1. 程式人生 > >vue父子元件傳遞引數

vue父子元件傳遞引數

父向子元件傳遞

    在父元件裡子元件的模板裡寫上要傳遞的key和value  

    <child  key='value'></child> 或者 <child  :key='value'></child>    如果是通過冒號繫結, value需要先在data裡定義

    子元件內新增props:['key'] 進行接收    props與data同級

 

子向父傳遞

    子元件的方法內通過 this.$emit('name',value);進行傳值

    父元件通過@name=fn進行接收      <child  @key='fn'></child>    fn(msg) 函式裡的msg就是子元件傳遞過來的資料 

 

路由傳參

    <router-link :to="{name:'hello',params:{mes:message}}">頁面1</router-link>     //hello為路由的name

    程式設計式導航 使用  this.$router.push({name:'hello',params:{mes:this.message}})

    接收引數使用 this.$route.params.message

          query形式  引數會顯示在位址列 用法相同,將params改為query