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...