vue元件資料傳遞

2022-08-02 09:15:08 字數 2631 閱讀 7024

1.父元件向子元件傳遞資料:通過props

2.子元件向父元件傳遞資料:通過自定義事件

3.平行元件通訊:建立bus例項,通過bus掛載($on)和呼叫($emit)事件

//1.例項化乙個bus物件

const bus

=new

vue();

//**事件匯流排 bus

vue.component('b

', },

template: `

<

div>

}<

/div>

`, created())}})

vue.component('a

', }

})=

newvue(

})script

>

body

>

html

>

4.巢狀元件通訊,父元件 provide來提供變數,然後再子元件中通過inject來注入變數.無論元件巢狀多深

vue.component('b

', },

inject:[

'msg'],

created(),

template: `

<

div>

}

<

/div>

`, })

vue.component('a

', ,

template: `

<

div>

<

b><

/b>

<

/div>

` })

= },

provide()

},template: `

<

div>

<

a><

/a>

<

/div>

`, }

newvue(

})script

>

body

>

html

>

5.$parrent $children 

vue 1 x 元件資料傳遞

本文章主要講了元件如何進行資料的傳遞,從簡單的元件裡面的資料如何顯示,子元件裡面的資料顯示,子元件獲取父元件的資料,子元件主動傳送資料給父元件。例子 可以在props 宣告傳遞的資料的型別,如 props 實際 例子 id aaa 我是父級 元件title v cloak box style hea...

vue2 0的父子元件資料傳遞

大家都知道,父子元件的作用域是相互獨立的,那麼父子元件又是怎樣通訊的呢。vue官網上說,父元件向子元件傳遞資料使用props選項,而子元件通過events事件觸發,傳送資料給父元件 1.父元件向子元件傳遞資料 首先引入vue.js 這裡是2.2.0版本 先將父子元件的內容展示出來 父元件內容 此處元...

Vue學習筆記(四)插槽 多級元件資料傳遞

八 插槽 我是使用者新增的內容啦啦啦 div one 我是新增在插槽一中的內容啦啦啦 div two 我是新增在插槽二中的內容啦啦啦 div template cpn div cpn 我是元件頭部 p slot就是插槽 slot one slot two slot 我是元件底部 p div temp...