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) {
|
