第一種方法:
通過給vue例項新增自定義屬性
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>非父子元件傳值(bus)
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id>
<
child
:msg
="first"
>
child
>
<
child1
:msg
="last"
>
child1
>
div>
<
script
>
/** vue.prototype.busb為自定義的屬性 可以是a,b也可以c,d等等
* */vue.prototype.bus
=new
vue();
varchild=}
",data()
},props:,
methods:
},mounted())}}
varchild1=}
",data()
},props:,
methods:
},mounted())}}
var=
newvue(,
components:,
})script
>
body
>
html
>
第二種方法:eventhub
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>非父子元件傳值2(eventhub)
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id>
<
button
@click
="getrandom"
>send a message to the child component
button
>
<
one>
one>
div>
<
script
>
vartwo=}
",data()
},inject:[
'eventhub'],
created())}}
varone=}
",inject:[
'eventhub'],
data()
},created())
},components:
};var=
newvue(,
provide()
},components:,
methods:}})
script
>
body
>
html
>
Vue父子元件之間和非父子元件之間傳值
父元件呼叫子元件的時候，繫結動態屬性 title v header 在子元件裡面通過props接收父元件傳過來的資料，props title 或者 props 直接在子元件中使用 呼叫子元件的時候定義乙個ref header v header 在父元件中通過 this refs.header.屬性 ...
vue元件之間的相互呼叫（父子關係與非父子關係）
父子元件的通訊請檢視這篇博文 此文主要介紹兄弟元件間的通訊 所有元件通訊方式請檢視這篇博文 第一種 eventbus 建立bus.js bus與main.js平級 export default vue off param once param emit param 在main.js引入並呼叫 imp...
父子組建傳值 vue父子元件之間傳值
vue父子元件進行傳值 vue中的父子元件，什麼是父元件什麼是子元件呢？就跟html標籤一樣，誰包裹著誰誰就是父元件，被包裹的元素就是子元件。父元件向子元件傳值 下面用的script引入的方式，那種vue cli搭建的同理 父元件通過 v bind 屬性名 自定義的 要傳遞的資料 子元件通過 pro...