個人小總結：1年多沒有寫博客，感覺很多知識點生疏了，雖然工作上能解決問題，但是當別人問到某個知識點的時候，還是迷迷糊糊的，所以堅持寫博客是硬道理的，因為大腦不可能把所有的知識點記住，有可能某一天忘了，但是我們工作上還是會使用，只是理論忘了，所以寫博客的好處是可以把之前的東西重新看一遍后會在大腦里面重新浮現起來，特別在面試的時候，別人問你的知識點的時候答不上來那種尷尬，但是平時經常使用到，只是說不出所以來的，因此寫博客是最好的思路。
閱讀目錄
Vue2--父子組件的訪問
父組件訪問子組件，子組件訪問父組件，或者子組件訪問根組件，Vue.js 都提供了相對應的API。
1. 父組件訪問子組件，使用 $children 或 $refs
2. 子組件訪問父組件；使用 $parent
如下代碼定義了 父組件<parent-component>，父組件模板定義了2個子組件；在父組件中，通過 this.$children 可以訪問子組件。
this.$children 是一個數組，它包含所有子組件的實列；如下代碼：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component1">
<p>{{ msg }}</p>
</template>
<template id="child-component2">
<p>{{ msg }}</p>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component1></child-component1><child-component2></child-component2><button @click="showmsg">顯示子組件的數據</button></div>',
components: {
'child-component1': {
template: '#child-component1',
data: function() {
return {
msg: '這是子組件1'
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: '這是子組件2'
}
}
}
},
methods: {
showmsg: function() {
for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg);
}
}
}
});
new Vue({
el: '#app'
})
</script>
</html>
理解$refs
在子組件上使用 ref指令，可以給子組件指定一個索引ID，如下代碼：
<child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2>
在父組件中，則通過$refs.索引ID訪問子組件的實例：
showmsg: function() { alert(this.$refs.A1.msg); alert(this.$refs.A2.msg); }
所有的代碼如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component1">
<p>{{ msg }}</p>
</template>
<template id="child-component2">
<p>{{ msg }}</p>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2><button @click="showmsg">顯示子組件的數據</button></div>',
components: {
'child-component1': {
template: '#child-component1',
data: function() {
return {
msg: '這是子組件1'
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: '這是子組件2'
}
}
}
},
methods: {
showmsg: function() {
alert(this.$refs.A1.msg);
alert(this.$refs.A2.msg);
}
}
});
new Vue({
el: '#app'
})
</script>
</html>
理解$parent
下面有一個子組件 child-component 和一個父組件 parent-component, 在子組件中，通過 this.$parent 可以訪問到父組件的實例；如下代碼：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component">
<div>
<p>111111</p>
<button @click="showmsg">顯示父組件的實例</button>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component></child-component></div>',
components: {
'child-component': {
template: '#child-component',
methods: {
showmsg: function() {
alert(this.$parent.msg);
}
}
}
},
data: function() {
return {
msg: 'parent component msg'
}
}
});
new Vue({
el: '#app'
})
</script>
</html>