vue开发:vue父子组件与非父子组件之间的通信
之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
< body >
< div
id = "counter-event-example" >
< p >{{
total }}</ p >
< button-counter
v-on:ee = "incrementTotal" ></ button-counter >
< button-counter
v-on:ee = "incrementTotal" ></ button-counter >
</ div >
< script >
Vue.component("button-counter",
{
template:
"< button
v-on:click = "increment" >{{
counter }}</ button >",
data:
function () {
return
{
counter:
0
}
},
methods:
{
increment:
function () {
this.counter
+= 1
this.$emit("ee",
"cc" )
}
},
})
new
Vue({
el:
"#counter-event-example",
data:
{
total:
"arg"
},
methods:
{
incrementTotal:
function (b) {
|