vue 元件之間傳遞資料

2021-08-20 17:34:45 字數 1027 閱讀 1433

有pagea, pageb 元件(父元件),這兩元件將使用 header元件(子元件), header 中的 顯示的資料來自 pagea 與 pageb中。

目錄結構:

-components

-- pagea.vue

-- pageb.vue

--sub

-- header.vue

header.vue **

假設 要值的變數名為 name

子元件header 需要從 父元件pagea中獲取 name的值, 需要在子元件header中新增props: ['name]選項。data中可以不用定義 name。

class="header">

}h1>

div>

template>

export default

script>

scoped>

style>

父元件pagea **

需要在引用 header 元件時,新增屬性繫結, 所以 name 不用大括號。name是 pagea data 中定義的變數, 可以在 created 或者 其他地方進行賦值。 這樣 pagea 中的 name 值 將會傳到 子元件 header 中的 name。

class="edithome">

v-bind:name="name">

sub-header>

div>

template>

import header from '@/components/sub/header'

export default ,

data ()

},created ()

}script>

scoped>

style>

參考文章:

< – private – >

< – end – >

vue 元件之間函式傳遞 元件之間相互傳遞引數

rt a,b兩個頁面傳遞引數 常用方法 click 的方式呼叫 touter.push 或者 的方式。push 方法 接收三個引數 name params query route.name 路由配置中的 name 名稱,vue中具有 全域性全匹配片段 意思就是這個 name 的名稱是全域性尋找到的,...

vue父元件與子元件之間的資料傳遞

父元件向子元件傳遞資料 父元件用資料繫結 子元件用props接收 template div model son datas fatherdata model son div template script import modelson from views test test vue model ...

vue學習筆記 vue元件之間的值傳遞

一 父子關係元件之間的值傳遞 1 父元件主動呼叫子元件資料 方法 首先在父元件中使用子元件的元素中新增ref屬性,值可以自定義 eg child 然後在父元件中要用到子元件中的資料或者方法的地方使用如下方法呼叫子元件的資料 方法 this.refs.child.子元件中的屬性名 呼叫 使用子元件中的...