<div id="app"> 
父組件： 
<input v-model="val"><br/> 
子組件： 
<test :test="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
test: { 
props: ['test'], 
template: "<input @keyup='findParent' v-model='test'/>", 
methods: { 
findParent: function () { 
console.log(this.$parent); //訪問根組件 
console.log(this.$parent.val); //訪問根組件的val屬性 
console.log(this.$parent.$children.indexOf(this)); //查看當(dāng)前能否在其父組件的子組件中找到索引 
console.log(this.$parent === this.$root); //查看父組件和根組件是不是全等的（因為他的父組件就是根組件） 
} 
} 
} 
} 
}); 
</script>

<div id="app"> 
父組件： 
<button @click="parentClick">點擊向下傳播broadcast</button> 
<br/> 
子組件1： 
<children1></children1> 
<br/> 
另一個子組件1： 
<another-children1></another-children1> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parentClick: function () { 
this.$broadcast("parentClick", "abc"); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-Parent"); 
}, 
parentClick: function () { 
console.log("parentClick-Parent"); 
return true; 
} 
}, 
components: { 
children1: { //這個無返回值，不會繼續(xù)派發(fā) 
props: ['test'], 
template: "<button>children1</button></br>子組件2：<children2></children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-children1"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children1"); 
console.log("message:" + msg); 
} 
}, 
components: { 
children2: { 
props: ['test'], 
template: "<button @click='findParent'>children-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-children2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
}, 
anotherChildren1: { //這個是返回值為true，會繼續(xù)向子組件的子組件派發(fā) 
props: ['test'], 
template: "<button>anotherChildren1</button></br>另一個子組件2：<another-children2></another-children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren1"); 
return true; 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren1"); 
console.log("message:" + msg); 
return true; 
} 
}, 
components: { 
anotherChildren2: { 
props: ['test'], 
template: "<button @click='findParent'>anotherChildren2-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
} 

} 
}); 
</script> 
}, 
parentClick: function () { 
console.log("parentClick-anotherChildren2"); 
} 
} 
} 
} 
} 

} 
}); 
</script> 

<div id="app"> 
父組件： 
<button>點擊向下傳播broadcast</button> 
<br/> 
子組件1： 
<!--綁定寫在這里，可以多個綁定同一個，或者不同綁定不同的，但不能一個綁定多個--> 
<children v-on:test="parent" @test2="another"></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parent: function (arg) { 
console.log(arg); 
console.log("the first method with test event"); 
}, 
another: function () { 
console.log("another method"); 
} 
}, 
components: { 
children: { //這個無返回值，不會繼續(xù)派發(fā) 
props: ['test'], 
template: "<button @click='childClick'>children1</button></br><button @click='childClick2'>children1</button>", 
methods: { 
childClick: function () { 
this.$emit("test", 'the argument for dispatch'); 
}, 
childClick2: function () { 
this.$emit("test2"); 
} 
}, 
events: { 
test: function () { 
console.log("test"); 
}, 
test2: function () { 
console.log("test2"); 
} 
} 
} 
} 
}); 
</script>

<div id="app"> 
父組件： 
<button @click="todo">觸發(fā)子組件的事件</button> 
<br/> 
子組件1： 
<!--綁定寫在這里，可以多個綁定同一個，或者不同綁定不同的，但不能一個綁定多個--> 
<children v-ref:child></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
methods: { 
todo: function () { 
this.$refs.child.fromParent(); //通過索引調(diào)用子組件的fromParent方法 
} 
}, 
components: { 
children: { //這個無返回值，不會繼續(xù)派發(fā) 
props: ['test'], 
template: "<button>children1</button>", 
methods: { 
fromParent: function () { 
console.log("happened fromParent by ref"); 
} 
} 
} 
} 
}); 
</script>